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Prefácio 


Tende em vista as diretrizes do MEC em Ensino, Pesquisa e Extensão, o 
Programa de Educação Tutcrial (FET). do curso de Engenharia de Tele- 
comunicações. da Universidade Federal Fluminense (UFF), desenvolveu um 
projeto de elaboração de apostilas. com o intuito de auxiliar cs alunos no 
aprendizado de temas importantes a sua formação, mas ausentes nas disci 
plins do referido curso, Estas apestilas também sac usadas como material 
Асо para os cıre e capacitação, ministra lee por alme do PET para 
es corpos decente e discente do curse de graduação em Engenharia de Tele- 
comumicações, 
Abaixo segne a lista de apestilas preparadas neste projeto: 


ño para hipentextos, principalmente eme 
ácinas da Internet (Webpages). 


jguagem de programa 
gada na construção de 


istema de edição de texto largamente utilizado em meios acadê- 
es, bem como por aleumas editoras nacionais е intet- 


LINUX : Introdução ao sistema cperacional LINUX, 


Linguagem C : Linguagem de programação 
blemas de engenharia e computação. 


MATLAR + Ambiente de simulac 
dicas p 


amplamente utilizada em pro= 


matemática, utilizado em diversas 


fissionais. 


SPICE : Ambiente de simulação de circuitos elétricos (analógicos e digitais) 
utilizado em pro discretos е integrados, 
Esta apcstila destina-se a introduzir o usuário à linemagem de programa- 
ção HTML, fomecendosthe as ferramentas básicas para a criação de páginas 
para Intenet, 
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São abordados neste material tados os temas necessárias à antcria de 
documentos HTML e, ao terminar de estudio, o leitor estará capacitado 
a elaborar sua própria página da Intemet, disponibilizando nela o conteúdo. 
que desejar, 

Uma vez dominadas as técnicas apresentadas nesta apostila, sugerimos 
«que c leitor centime seus estudes aprendendo técnicas mais avançadas de 
programação para Internet, tais come HTML Dinámico, Java Script e Java, 


Esto documenta é de distriluição gratuita, sendo proibida a venda de parte 
ou da íntegra dc documento, 
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Capítulo 1 


Noções gerais sobre HTML e 
Internet 


1.1 Características da linguagem HTMI, 


A linguagem HTML (Hyperteat Markup Language) tem o ebjetivo de forma- 
tar textos através de marcações especiais dencminadas fag; 


res cu Erousers, Além disso, esta Iinguagem possibilita a interli- 
entre páginas da Web, criando assim documentes com a conceito de 
hipertexto, 

Características básicas da linguagem HTML 


+ Documentos HTML são arquivos de texto escritos em ASCII? 


+ O HTML não faz diferença entre letras maiúsculas c п 
suas marcações, оп seja. nao € “case sensitive" 


las em 


+ Nem todas as marcações e seus comespondentes recursos são suportades 
por qualquer navegador. Quando um cliente Web não entende uma 
marcação, ele simplesmente а incra 


TASC (American Standard Cole far Information Interdunge) 6 c fomato tais co 
‘um usado em arquivos texto em cempatadcres € na Item Num arquivo ASCII, cada 
caractere alfabético. mumérico on especial, é representado por um número binário de sete 
tits, É possível reptesentar até 128 caracteres com este código. 


+ Arquivos HTML podem possuir as extensões “hem ca ‘hunt. А prie 
meira € normalmente utilizada em sistemas UNIX e a segunda em sis 
temas Windows, Os Browsers são capazes de exibir documentos com 
ambas as extensões, 


1.2 Tags ou marcações HTML 


А Ingnagem НІМІ. pertence a uma classe de linguagens de programaçao 
conhecida como “Tag Languages”. cu simplesmente Linguagem de Marcação. 
Neste tipo de linguagem, cs comandos são escritos em forma de marcações 
deneminadas fags. 

De um medo geral, as tags aparecem em pares, delimitando c texto a ser 
formatado. А fag que alar п campo de amació de nm comando pode ser 
identificada peles sinais 


‘$$ >", enquanto a que encerra este campo de atuação possui os $ 
ЕСЕ 
Por exemplo: 


<B> Linguagem </B> de Marcação, 


a determina que а marcação "TP seja aplicado ao testo 
mas não ao texto ‘de programação”. 

Há exceções a esse funcicnamento de paridade das tags, onde a marca 
<tag> não necessitará de sua correspondente </taz>, Veremos exemplos 
Че ambos ce tipes mais adiante. 

Além do comando propriamente dite, uma tag pede conter sens рап. 
tros, 

Parâmetros são recurscs próprios de cada marcação, que permitem que ele 
seja executado de diversas formas, Fede-se dizer que enquanto um comando 
Brouser c que fazer, seus parâmetros dizem a ele como fazer, através 
de suas cpções, Assim como сайа comande possui parámetros específicos, 
сайа parâmetro possui opções específica, 

Veja c exemplo: 


«FONT SIZE: 


"сос 


тесп" > Texto </FONT> 
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No exemplo acima, ‘FONT é c comando e, ‘SIZE e “COLOR são os pa- 
metros cujas opções escolhidas p yamadcr foram, respectivamente. 
Fe een’, Note que, ac contrário da marcação de abertura, a marcação 
de fechamento de um comando não precisa mencionar seus parâmetros, 


1,3 Estrutura de um documento HTML 


A estrutura principal de um documento HTML possui duas partes básicas: 
© cabeçalho e o corpo do programa. 

Todo documento deve ser iniciado com a marcação <HTML> e finalizado 
com </HTML>. Este par de tags é essencial, 

A área do cabeçalho. embora muito conveniente, é opcional e delimitada 
pelas marcações <HEAD> e </HEAD>. Entre estas tags pode ser definido 
o título da página, através das marcações <TITLE> c </TITLE>. C título 
especificado será exibido na barra de tículo do Browser. 

A maioria dos comandos HTMI será colocada na área do ca 
grama, que é delimitada pelas marcações «EC 
se as ‘frame documents", que será mais adiante, esta € uma marcação 
chrigatória, 

C exemple abaixo ilustra a estrutura de um programa HTML, 


<HTML> 
<HEAD> 

<TITLE> Primeiro Exemplo </TITLE> 
</HEAD> 

<BODY> 

Bem-vindo ao mundo do HTML! 
</BODY> 

</HTML> 


1.4 Criando, abrindo e manipulando documen- 
tos HTML 
Cecumentos HTML podem ser criados em qualquer editor de texto visual 


(nes quais a visualização de arquivo não depende de compilação de código), 
tais como Bloco de Notas, VI, emacs, etc, Alem dos editores específicos para 
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várias plataformas, existem conversores de diversas formatos, per exemplo 
de *doc para *dhtmil 

Para criar uma página ne Floco de Notas do Browser, por exemplo, é pre 
cise digitar c texto desejado Juntamente cem as marcações que о formatarão, 
Um decumento escrito desta forma € denominado código fonte, 

Para praticar, abra o Bloco de Notas e digite o exemplo da seção anterior. 
Na hora de salváxlo, ne campo Salvar como Tipo’ da caixa de diálogo Salvar 
Come’, escolha а opção “Todos св Arquivos’ e no campo Nome do Arquivo’ 
nome desejado xuntamente com a extensão shtml cu „htm, Se este 
procedimento não for adctado, с arquivo será gravado com a extensão padrão 
ахо е não poderá ser aberto por Browsers 

Depois de salvo о documento. é possível alterar seu código fonte clicando 
cem o botão direito do mouse scbre o fone da página, escolhendo а ору 

Abrir Cem’ e, em seguida, selecionando o programa editor de texto disponi- 
vel. No caso do Windows, este programa será o Bloco de Notas. 

Para visualizar © arquivc criado no Internet Explorer, por exemplo. ch 
que no mem “Arquivo? e escolha а арас “Abri”. Fsrreva então a caminho 
completo para 0 arquivo desejado no campo oferecido cu clique no bot 
Frocurar para procurá-lo entre as pastas de seu computador, 

Uma dica interessante para quem está começando e para quem deseja 
саа ver mais conhecer cs recursos da linguagem HTML é analisar có 
onte de páginas da Web. No Internet Esplover o usuário pode fazer isso 
do no menu “Exili” e escolhendo а opção “Código Fonte’. Desta forma 
édigo fonte da página será mostrado no Bloc de Notas, casc voe? esteja. 
trabalhando no Windows, 


1.5 Códigos especiais de caracteres 


Existem dois tipos de códiges especiais que permitem inserir qualquer car 
taeteve numa página HTML, mesme que ele não esteja presente no teclado, 
Estes códigos são especificados pela noma ISO-Latin-1 ou a partir de uma 
identidade HTML 


um código composto pelo caractere ‘f? seguido do 
# e de uma combinaçãe de números, sendo terminado com ++. Já a 
identidade HTML usa c caractere ‘& segui o de uma palavra que identifica 
c símbelo e de "7. As identidades HTML correspondentes a alguns simboles 
comms estão listados no apéndice A desta aposti 
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É aconselhável, ac se criar uma página, utilizar estes códigos especi 
ara criar a acentuação da lingua portuguesa, Desta forma. Browsers mais 
amtiges on até mesmo aqueles que estejam configurados para cutres idiomas 
poderão exibir corretamente a letra acentuada. 


1.6 Uniform Resource Locator 


A abreviação URI corresponde à nomenclatura Uniform Hesoures Locator 
(ecalizador universal de recursos), utilizada pela Internet para indicar o 
endereço de um documento. Saber especificar corretamente uma URL é 
imprescindível para utilizar adequadamente muitos ccrmandoe da linguagem 
HTML. 

Uma URL deve conter três partes: 
do servidor e a localização do arqui 

Sintaxe: pretocolc:/ /servidot/ nome do arquivo, 

Cade: 


protocelo do documento. c endereço 


protecolo - É c tipo de pretocolo ? de cemmmicaçãe que deve ser usado, 


servidor - É o nome do servider que será acessado, 


nome do arquivo - É o neme do documente que será acessado, 


Como protocolos, podem ser usados: 


HTTP - É um servidor da World Wide Web que contêm documentos no 
formato HTTP" e que significa HyperTert Transfer Protocol 


GOPHER - É um servidor composte por menus e diretóxics com informa- 


= sobre arquivos e dalos. 


FTP - É uma abreviação de File Transfer Protocol. 


Telnet - Este protocclo inicia uma sessão para se conectar remetamente a 
vc computador. 


WAIS - Wide Aren Indexed Server é um local onde documentos estão dis- 


poníveis em formate especial de pesquisa, 


Саш de regres que especifica o formato, a sinercnizagin 
verificação de ens na comico entre computadores 


seglndamente еа 
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File - Indica que a documento está no micro cu na rede local 


Capítulo 2 


Parágrafos e quebras de linha 


2.1 Parágrafos 


A linguagem HTML não reconhece cs caracteres de quebra de linha dos 

editores de texto e, mesmo que exista uma linha em branco по código fonte. 

cs clientes Web sé recenhecem o inicio de um nove parágrafo mediante à 
ão apropriada. 

A marcação <P> é utilizada para definir o início de um novo parágrafo. 
deixando uma linha em Lranco entre este e o texto anteri 

C parámetro ALIGN define o alinhamento do texto do parágrafo e pode 
assumir cs valores def”, ‘right’, "center e ‘justify’, correspondendo respecti- 
vamente acs alinhamentos à esquerda, à direita, ao cento e ustfrado, Se o 

arâmetro ALIGN nic for especificado, per padrão a parázrafo será alinhado 
erda. 

Sintaxe básica: <P> Texto 

Sintaxe completa: <P ALIGN=1eft | right | center | justify"> Texto 
</P>, 

As barras verticais no exemplo de sintaxe indicam que as opções são 
mutuamente exclusivas, como era de se esperat, е as aspas são opcionais neste 
сако, A ntilização de aspas na definição de parâmetros só será obri 
em duas situações: quando c valor do parâmetro far compesto de duas cu 
mais palavras cu quando 
ma tag, 

Este comando pode ou ni 
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2.2 Quebras de linha 


А marcação <BR> faz uma quebra de linha sem acrescentar espaços, Não 
existe a marcação </BR>. 

A diferença entre a aplicação de <P> e <BR> pede ser visualizada 
no exemplo abaixo. Digitec em sen computador е salve como “para 
табат, Veja o resultado. 


<HTML> 
<НЕАГ 


'arkzacntegrafes е quebras de linha </TITLE> 


«P ALIGN=center>Utilizando F:</P> 
<P> Vamos separar esta senteniecedia com a marraároceiil;áratildeze 
de paxicoacutesrafo, </P> 
Para verifica a ноп гей, 
<P ALIGN=cmter> Utilizando BR:</P> 
> Agora separamos as linhas utilizan 
a marcatecedil;katilde:o de quebra de linha. <BR> 
Deu para notar? 
</BCDY> 
</HTML> 


2.3 


А marcação <HR> insere uma linha diviséri 
Não existe a marcação </HR>, 
is parâmetras deste comando são 


inhas horizontais 


na posição onde for colocado, 


Os princi 


Defîne а largura da linha e deve ser especificado em 


WIDTH=“número | número% - Especifica o comprimento da linha em 


els ou porcentagem do tamaho da janela. 


ALIGN=Heft | center | right” - Especifica a alinhamento herizental da 
Tinha. 
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COLOR="cor" - Especifica a cor da linha, 
NOSHADE - Indica que a linha na 


deve receber c eleito de sombra. 


Sintaxe básica: <HR> 
Sintaxe completa: <HR ишег WIDTH= número | námerc? 
ALIGN=Hef | center | right” COLOR = “cor” NOSHADI 
Modifique © exemplo paraerafodhtml conferme c indicado abaixo, 


<HTML> 
<HEAL 
<TITLE> Parkascutegrals e quebras de linha </TITLE> 
</HEAD> 
<EODY> 
<F ALIGN-comter> Utilizando F:</P> 
<P> Vamos separar esta sentenfeccediba com a прасак сеанс 

de parkcnacutesrafo, </P> 
Para verificar а diferenkccedila. 
<HR ALIGN=center WIDTH=75% SIZE—15 COLOR=blue NOSHADE> 
<F ATIGN=center>Uiilzandlo ftc P» 
<F> Agora separames as linhas utilizando < 
a татав акй; de quebra de linha, <BR> 
Deu para notar? 
</BODY> 
</HTML> 
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Capítulo 3 


Aplicando estilos de texto 


3.1 Marcadores de estilo 


Estes comandos permitem que © programador crie uma série de efeites no 
texto, alterando a forma e o tamanho da fonte. Todas as tags deste tipo 
devem ser especificadas em pares. marcandc e o fim do texto a ser 
formatado. 

C 


is comandos de estilo de texto sc 


Negri 


= Айка o estilo negrito. Sintaxe: <B> texto </B>; 
Ttálico - Aplica o estilo itálico, Sintaxe: <I> texto </I>; 
Sublinhado - Aplica o estilo sublinhado. Sintaxe: <U> texto </U>s 


Strong 


milar ао negrito. Sintaxe: <STRONG> texto </STRONG>: 


‘Typewriter - Deixa o texto cem espaçamento regular. Sintaxe: «TT» 


texte </TT> 


Big - Aumenta a fonte e 
BIG»: 


а с estilo пей. Sintaxe: «DIG» texto 


Small - Reduz a fente. Sintaxe: «SMALL» texto </SMALL>; 


Sobrescrito Eleva o texto e diminui seu cerpo. Sintaxe: «SUP» texto 
</SUP>; 
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Subscrito - Rebasa o texto e diminui seu corpo. Sintaxe: «SUB» texto 
</SUB>; 


Pulsante - Faz com que c texto pisque, Este efeito não funciona em todes 
os Brousers. Sintaxe: <BLINK> texto </BLINK: 
O exemplo а seguir mostra todos estes efeitos, Digite-c е salvo como 
estilo tl 


<HIML> 
<HEAD> 
<TITLE> Estilos de testo </TITLE> 


еро» 
<BR> <I>IGancmesiec</I> 
<BR><U>Sublinhado</U> 
<BR><STRONG>Suone</STRONG> 
<PR><TT>Typewtitter</TT> 
<BR><BIG>Big</BIG> 
<PR><SMALL>Small</SMAL 
«BR Texto <SUE>Sobresarito</SUP> 
<BR> Texto <SUB>Sulscrito</SUB> 
<BR><BLINK>Pulsante</BLINK> 
</BODY> 

</HTML> 


3.2 Cabecalhos 


Оша forma usada para mudar o tamanho da letra e aplicar o estilo n 
a mm texto é a nso das mareações <H>. A Tingagem HTML реке seis 
comandos, de H1 a H5; que aplicam um tamanho de fonte diferenciado para 
€ texto que venham a envolver. Além de modificar o tamanho, cs comandos 
H inserem linhas em branco acima e abaixo da linha de texto formatada. 

O comando HI possui o maior tamanhe, enquanto que HG possui o mener 
tamanho de fonte, 

A sintaxe básica deste comando € «Hn» Texto </Hn>. 

Onde n é o número de 1 а б conespendente ao tamanhe do cabeçalho. 
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plo abaixo pen 
ı0 ‘cabeeshiml’, 


C exem visualizar cs tamanhos de cabeçalhcs. Digite-o 


salvando 


<HIML> 
<HEAD> 

<TITLE> Cabekccedilalhos </TITLE> 
1EAD> 

<BODY> 

<Н1> Cabe&eceaditalho com tamanho 1 </Н1> 
<H2> Cabekccelilralho com (ашап 
<H3> Cabekccedilalho com tamanho 3 
<Н4> Cabekccelilralho com tamanho 
<H5> Cabekccelilralho com tamanho 
«HG Cabefeeeadiialho com tamanho 
</BODY> 

</HTML> 


3.3 Exibição de textos pré-formatados 


través des tags <PRE> с </FRE> c programador pode incluir, em uma 
“página; um texto que foi digitado пит editor de textos qualquer. mantendo 
cviginal com marcas de tabulação, fim de linha gerado pela 


al parâmetro do comando FRE é o parâmetro WIDTH. que 
especifica, em caracteres, a largura da linha do texto. 

Sintaxe hásira: <PRE> Textn </PRE>. 
Sintaxe completa: <PRE WIDTH=argura”> Texto </FRE>, 


3.4 Centralização de textos e outros elementos 


Para centralizar um cabeçalhos parágrafo en fimo dentro da larga da 
“página, devem ser usadas as marcações <CENTER> e </CENTER> envok 
vendo c elemento a ser centralizado 
Sintaxe: <CENTER> | 
Modifique c exempl 


abecıhtml’ conforme mostrado abaixo, 
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<HIML> 
<HEAD> 
<TITLE> Cabekceedilalhes </TITLE> 
</HEAD> 
<BODY> 
<CENTER> 
«Hi Cabekccadi 
<Н?> Саеге 
«Hi» Cabeforedi 
ue шешен 


salhe cem tamanho 1 </HL> 
he rem tamanha 2 </P> 
alhe cem tamanho 3 </H3> 
alhe cem tamanho 4 </H4> 
lhe cem tamanho 5 </H5> 
alhe cem tamanho б </HO> 


3.5 O marcador FONT 


As tags «FONT» е </FONT> permitem ao programador modificar о ta- 
manho, o tipo e a ccr da fonte de um testo, 
Sens parâmetro são: 


SIZE="número” - Específica o tamanho da fonte a ser utilizada e pode 

variar de 1 а 7. Caso seja especificado um número antecedido per 

de adiçãe ou subtração, o tamanho райгап da fonte (tamanho 2; 

será, respectivamente, aumentado cu diminuído daquele valor. Assim 
size е size—1" têm o mesmo efeito prático, 


PACR=!nome - Permite que seja escolhia nma fonte diente para a 
testo, Годан ser especificados vários tips de fente, de modo que, se o 
sistema nāc possnir a primeira opção, а segunda C canda amtomati- 


fonte2, fonte, Neste сано, fontel é a fente preferida pelo programador, 
fonte? é sua segunda opção e fonte3 a última. 


COLOR="cor" - Especifica a cor do texto, Seu valor pode ser especificado 
pelo neme da cer em inglés, no caso de cores mais comuns, Forém. no 
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caso geral, a especificação de ceres é feita através de padrão RGB (Ret 
Green Blue). Neste padrão a cor é descrita per um número de 6 dígitos, 
onde es dois primeires correspendem à intensidade da cer vermelha, cs 
deis do meio à da cor verde e cs dois últimos à da cor azul, А cor 
resultante será uma combinação destas três, A base numérica utilizada 
para a representação das ccres no райо RGB é a hexadecimal, o que 
nes fomece 256 possibilidades de intensidade para cada cor básica (de 
О a 255). Fsrevese COLOR= туд” ou COLOR= “nome”. Cs 
pales RGB de algunas cores podem ser vistos no apêndice B desta 
apostila. 


Sintaxe básica: «FONT» Todo </FONT>. 
Sintaxe completa: <FONT FACE— nome" SIZE: 
Texto </FONT>. 
Digite э exemplo abaixo e salve-o como ‘cores. html 


rúmerc" COLO 


<HIML> 

<HEAD> 

<TITLE> Cores de texto </TITLE> 

</HEAD> 

<BODY> 

<FONT SIZI DIBD">P</FCNT> 

<FONT SIZI ETD" >e</FONT> 
DA IBI Ste /FONT> 


<FONT SIZE” CCLOR-: 
2 EFI >< FONT> 
EFS03'>T</FONT> 
<FONT SIZI 30А4В7>е</ЕОХТ> 
<FONT SIZE-"€" CCLOR-“055E7D">1</ FONT> 
<FONT SIZE=7" CCLOR="0CDIBD" >e</FONT> 
</BODY> 
</HTML> 


3.6 Cores de texto e padrões de fundo 


Através da manipulação des parámetros da marcação <BODY>, é possível 
definir cores рага o fundo da página, para o texto e para os Tinks de acordo 
com a preferência do programador. Também é possível inserir imagens como 
plana de funde, porém isto será tépice de um de nossos próximos capítulos, 
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Em todos as parámetros do comando BODY, a cor deve ser definida da 
mesma forma que no parámetro COLOR de comando FONT, cu seja, pelo 
seu nome ou padrão RGB. 

Os principais parámetros do comando BODY utilizados para alterar cones 
de texto e fundo de uma página sic: 


BGCOLOR="cor" - É a cor de fundo, onde o padrão é 
dependendo do Browser. 


cinza cu brancs, 


TEXT= “cor” - É a cer de texto, sendo que o padrão é preto, 
LINK=*cor* - É a cor des links, sendo que o райо é azul 


VEINK=“cor” - É a cor dos Ils 4 visitados, onde o padrão é vermelho- 
иршо, 


Assim, podertamos ccnfigurar as cores de uma página complementando a 
marcação <EODY > da seguime forma: <BODY BGCOLOR—ta" TEXT- tar” 
LINK—cor" VLINK="cor"> [Conteúdo da página] </BCDY> 

Devesse ressaltar que c programador precisa ter cuidado ac escolher as 
caes para que nån atrapalhem a leitura la informação rentida na página. 
Modificações nas cores dos inks também podem vir a confundir o usuário: 
portanto, se quiser аста ах, tome cuidado para não inverter o padrão cn 
sceler cores ignais às de texto ou fundo. 

Modifique o exemplo ‘coresihtmi conforme mostrado abaixo. 


<HIML> 
<HEAD> 

<TITLE> Cores de texto e fundo </TITLE> 
</HEAD> 

<BODY BGCOLOR=black> 

“Т COLORCDIBD'>P</FONT> 


“A30\MB>t</FONT> 
“EEF303">-</FONT> 


:g" СОТОК АЗАЛ >є< FONT> 
4 COLOR=“055E 7D" >I</ FONT > 
COLOR=0C0BD">e</FCNT> 


>]ink</A> com cor modificada 


Devese observar que a tag <A> utilizada no exemple acima será definida 
по Capitulo 5. 


Capítulo 4 


Imagens 


De modo geral, para que seja pessível inserir uma imagem em uma página 
HTML, cla deve estar disponível nos formatos GIF cu JPG, Estes forma- 
tos sic aceites por qualquer Browser, além de possibilitar a compactação des 
arquivos de imagem, permitindo o carregamento mais rápido da página, Cere 
tos Browsers conseguem exibir imagens de outros formatos. como BMP, por 
Frrém, tendo em vista as aspectes de miversalidade o eficiência, 
«s formatos GIF e JEG continuam sendo os mais recomendados, 

Você pode obter uma imagem através de páginas na Internet, CD-ROMs 
de imagens cu processos de dieitalização. Neste último caso, é provável que 
se precise utilizar programas de tratamento de imagens, tais сато PaintShop 
Pro ou PhetoPaint para realizar uma conversão de formatos, 

É importante ressaltar que aleumas imagens encontradas em páginas da 
Web podem estar protegidas por direitos autorais, Portanto, antes de colocar 
em sua página uma figura interessante cbtida em algum site, procure checar 
se ele faz alguma restrição quanto à utilização de suas imagens. 


41 O marcador IMG 


O marendar IMG insere uma imagem ne comp 
Seus principais parámetros sic 


do decumento, 


ET 


“nome ou URL do arquivo” - Nome cu endereço (URE) da ima- 
mem a ser exibida, Este parámetro é obrigatório, 


en 


ALT="Texto” - Exibe c texto especificado quande o Brewser não encontra 
a imagem ou quando о cursor passa por cima da figura. 


ALIGN= “Top | Middle | Bottom” - Especifica o alinhamento da ima- 
em relativamente à linha de texto ende é exibida, 


ALIGN= “Left | Right” = Especifica о alinhamento da imagem relativa- 
mente às bora laterais da janela. 


ISMAP - Determina que a figura é um mapa de imagem, Trataremos deste 
assunto com mais detalhes em um de nossos próximos capítulos 


WIDTH= "número | número%" - Especifica a largura de exibição da 
imagem em pixels cu em relação à largura da janela, independente 
mente de sem tamanhe original. Quando se altera a dimensão horizon 
tal da imagem. a dimensão vertical é modificada automaticamente para 
que a proporção original seja mantida. 


HEIGHT= “número | número% - Especifica a altura de exibição da 
imagem em pixels cu em relação à largura da janela, independente- 
mente de sen tamanhc criginal. Quando se altera a dimensão vertical 
da imagem. a dimensão horizontal é modificada automaticamente para 
que a proporção original seja mantida. Se quisermos forçar uma di 
torção na properção original da imagem, temos que usar ce parámetres 
WIDTH e HEIGHT simultaneamente, 


BORDER “número” - Especifica, em pixels, a largura da berda da ima- 
gem. C valor zero remcve a borda, 


VSPACE-— número" - Determina. em pixels, o espaço que deve ser deb 
xalo em braneo na parte de cima c na parte de baixc da imagem, 


HSPACF—námere?" - Determina, em pixels, c espaço que deve ser lek 
xale em branco nas laterais da imagem, 


‘neme ou URL do arquivo” 
Sintaxe completa: <IMG SRC= nome ou URL de arquiv 
HEIGHT =número” BORDER— número" ALT 
VSPACE= número” HSPACE— ám? ALIGN 
Left | Ri 


WIDTH= número 


Middle | Bottom | 


ШЕЕ E 


ET-TELE)Jj3: 


4.11 Inserindo imagens do mesmo diretório 


Se a imagem e c documento HTML que a exibirá estiverem no mesmo dire 
túrio. basta especificar o neme completo da imagem no parámetro SRC do 
comando IMG. 

Sintaxe básica: <IMG SRC— ncm da imagen". 

Digite c exemplo abaixo salvando come "imagensl-htm. Para que ele 
funciene, é necessário que você escolha uma imagen ner e a salve com 
© nome de ‘imagem gif” no mesmo direteric do documento 


<HIML> 
<НЕАП> 

TITLE» Imagens 1 = Inserção de imagens </TITLE> 
</HEAD> 
<BODY> 
<CENTER> 
<H1> Inserindo imagens do mesmo diretório </Н1> 
<BR> 
imagem gif > 


4.1.2 Inserinda imagens de diretórios diferentes 


Se a imagem e о documento НТМІ estiverem em diretórios 
diferents, o programador precisará especificar c caminho relativo para a 
imagem a partir do documento corrente. no parámetro SRC do comando 
IMG. O Browser sempre assume o diretório atual сато o inicial para procurar 
um arquivo especificado. 

Fara especificar uma imagem que esteja em um diretório abaixo de dírető- 
Ticatmal, hasta milizar asintaxe: <IMG SRC 7 

For cutro lade, se o diretério onde se encontra a imagem estiver situado 
acima do diretório atual, а sintaxe utilizada será: <IMG SRC= nome do 
аук? 

Fortante, o simbclo +. corresponde à passagem para uma nivel superior 
uma árvore de ditetórios e c simbole “/' corresponde a uma passagem para 
am nivel inferior. Utilizando estes símbolos, vc? poderá incluir em uma 
a um arquivo qualquer de imagem existente no mien 
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Observe os exemples de sintaxes: 


<IMG 5 > + Esta sintaxe insere no doce 
mento a imagem imaerme pe, que está salva no diretétio ‘Dir, abaixo do 
diretéxio ‘Dir’, que por sua vez encentra-se abaixo do diretório atual, 
<IMG SRC—../././imagem.jpe"> - Esta sintaxe insere no document 
imagem “imagem. jpg”, que está salva no terceiro diretório acima do diret 
corrente, 
<IMG SRC, 


a 


> - Esta sintaxe insere no der 
a no diretétio ‘Dir, abaixo 
ente, 


i3 imavem ps 


mento a imagem “imagem, pe”. que está sa 


do segundo diretório acima do diretério cat 


Modifique o exemplo imagens]. hum" como mostrado abaixo. Para que 0 
código funcione, você deverá esrelher nma imagem qualquer e salva como 
“imagem2gáf ne diretério imediatamente acima do diretório atual. Salve 
também outra imagem come fimagem3.himi" mma pasta do diretrio aual 
chamada Sakai’. Lembre-se que o direto atual será aquele que contém o 
documento imagens ип 


HIML> 
HEAD> 

<TITLE> Imagens 1 - Inserção de imagens </TITLE> 
</HEAD> 

<BODY> 

<CENTER> 

«HL» Inserindo imagens do mesmo diretório </HL> 


<BR> 


павет gif 
<P> 

<H1> Inserindo imagens de outros diretórios </H1> 
<P> 

<H2> Diretério acima do diretório atual </H2> 


<BR> 
imagem2.gif"> 

«H2» Diretério abaixo do diretório atual </H2> 

<BR> 


<IMG SRC=Subdir /imagem3.gif"> 


ELE, 


</BODY> 
</HTML> 


4.1.3 Inserindo imagens de outros servidores 


em uma página HTML imagens localizadas em outro servider, 
ic apenas especificar canetamente япа URL no parámetro SRC do 
comando IMG. 

Sintase básica: <IMG S 
ja c exemple: 
IMG SRC= “http: //www.servider.cem-br imagem. 

axe do exemple, insere no documento a imagem ‘imacem.gif’, 1o- 
calizada no servidor avweservidar.enm be” O pretorele ntilizado € o http e 
sua declaração é necessária para a sintaxe cometa da URL, como vimos no 
primeiro ca 

Ineremente mais uma vez c exemplo “imagens html” conforme mostrado 
abaixo 


= URL">, 


<HTML: 


E> Imagens 1 - Inserção de imagens </ TITLE 


<BODY> 
<CENTER> 
<HI> Inserind 
eH 
<BR> 
<IMG SRC 


imagens do mesmo diretório 


“imagem gif" > 
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<IMG SRC=Subair/imagem3 > 
<P> 
<H1> Inserindo imagens de outros servidores </H1> 


42 Alinhamento de imagens 


Fara alinhar uma imagem nima página é utilizado о parâmetro ALIGN, 

Ascpções Top, Middle e Bottom do parámetro ALIGN definem a posição 
da imagem com relação ao texto, Se fer usada Top. a figura será alinhada 
cem o texto pela sua parte supera, se for usada Middle, pele centro e, se 
for usada Bottom, pela parte infericr. Estas três opções mantêm a imagem 
cemo um caractere de linha, on seja, de cada lado da figura só poderá haver 
uma linha de texto, 

Por catro lado, as opções Right e Left definem a 
página. А opção Left determina que a imagem seja posicicnada junto à borda 
esquerda da janela c a opção Right faz com que a imagem fique. unte à borda 
direita, Essas duas opções fazem ccm que а imagem não mais Seja encarada 
como um caractere de linha. mas sim como um objeto a parte, e isc permite 
que c texto па ao lado da figura, 

Digite o exemplo abaixo e salve-o como "imanen2.htri na mesma pasta 
ende se encontra ‘imagens! bum 


xeição da imagem na 


«HIML 
HEAD> 
<TITLE> Imagens 1 ~ Alinhamento de imagens </TITLE> 


«HI Alinhamento de imagens </H1> 
E 
Alinhamento pelo <IMG SRC-irmageml gif” ALIGN=top > tor 


E 


ШЕЕ PE 


Alinhamento pelo <IMG SRC=imageml gif” ALIGN-bcttem > fundo 
<P> 

Alinhamento pelo <IMG SRC="imagemt gif” ALIGN-middle > m 
<P> 

«IMG SRC=imageml gif" ATIGN=right> Note que, com este tipo de 
alinhamento, o texto Hui a lado da Figura naturalmente, Iste ише 
perque, quando alinhames a figu Tnterais, cla passa a não ser 
encanada pele Browser como um caracter de linha. 

<P> 

<IMG SRC—imageml gif" ALIGN=Iefi> Note que, com este tipo de 
alinhamento. o texto flui ao lado da figura naturalmente, Istc ocorre 
perque, quando alinbamcs a figura pelas laterais, ela passa a não ser 
encarada pele Browser como um caracter de linha. 


</HTML> 


4.3 Backgrounds com imagens 


Ao invés de definir uma cor para enfe 


tar O fundo de sua página, O pro- 
ador pode cptar por utilizar imagens, Fara fazer isto basta substituir o 
arâmeito BGCCLCR do comando BODY pelo parámetro BACKGROUND. 
Em BACKGROUND devaá ser especificado o nome cu a URL do arquivo 
de imagem desejar, lembrando que este deverá estar, preferencialmente, nce 
famatos GIF cu JEG. 

Sintaxe: <BODY BACKGRCUND= “nome cu URL do arquivo!> [Cone 
tete da pagina) < / BOD! 

As técnicas estudadas anteriormente para inserit imagens que não este 
“Jam contidas no mesmo diretório do documento contimem válidas, Observe 
© exemplos 


<BODY BACKGROUND 5. /imagem,jpe"> [Contendo d 
= Esta sintaxe insere, como plano de fundo do decumento, a imagem “ima- 
sempe? localizada no diretério acima do diretório corrente, 


BODY BACKGROUND= 


Vimagempe”> [Conteúdo da р 


= Esta sintaxe insere. como plano de fundo do documento, a imagem “ima- 
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gem.p localizada no diretério ‘Dirî’ abaixo do diretório ecrrente, 
BODY BACKGRCUND= “http://wveveservidorscom.Lr imagem gif” 


>[Conteńdo da página </BODY> = Esta sintaxe insere, como planc de 
funde do documento, а imagem ‘imagen calizada no servidor ser 


dor come. 


pek 


É necessário esclarecer que para preencher todo o fundo de uma página 
não é preciso inserir um figura que possua as dimensões dela, C que o 
Browser fuz € carregar а imagem escolhida e então repetí-la quantas vezes 
for necessário a fim de preencher toda a tela, Devido ao fato de a imagem ser 
carregada nma única vez, É recomendável, para maior rapidez na abertura 
da página, que figuras pequenas sejam definidas como planas de fundo. É 
clave que c aspecto estético também é determinante, mas em figuras do tipo 
textura, a adoção deste procedimento praticamente não será visível embora 
c tempo de carga da página seja sensivelmente rezilo, 

Não É recomendável a utilização de figuras com muitos contrastes, pois 
“sto pode dificultar a leitura das informações contidas na página. 

Modifique o exemplo “imagens2. html para que fique como n 


<HIML> 
<HEAD> 

TITLE Imagens 1 - Alinhamento de imagens </TITLE> 
</HEAD> 

«RODY RACKGROUND=../imagem?.gif"> 
<HI> Alinhamento de imagens < /Н1 > 

<P> 

Alinhamento pelo <IMG SRC=Simager gif” ALIGN= 
E 

Alinhamento pelo <IMG SRC-^imagemLgif* ALIGN=botiom > fundo 
<F> 

Alinhamento pelo <IMG SRC-imageml gif” ALIGN-midale > me 
<F> 

<IMG SRC=Simageml gif” ALIGN=1ight> Note que, com este tipo de 
alinhamento. c texto flui ac lado da figura naturalmente. Esso 
porque, quando alinhamos a figura pelas laterais, ela passa a não ser 
encarada pelo Browser cemo um caracter de linha. 

E 


UFF 


Завета?" ALIGN-lefts Note que, com este tipo de 
alinhamento. o texto fini ao lado da figura naturalmente. Itc ocorre 
ne, quando alinhames а figura pelas latera ela passa a não ser 
encarada pele Browser como um caracter de linha. 


<IMG SRC 
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Capítulo 5 
Links 


Como fci comentado по inícic da apostila, a princ da Intemet éa 
criação de decumentos cem c conceite de hipertexto. cu seja. um document 
que se liga a cutres através de hyperlinks. Com este recurso. o programador 
poderá permitir ao usuário o acesso imediato a qualquer endereço da Web a 
artir de sua página. 

As palavras cu imagens de um decumento que o interligar com outres 
são denominadas marcadores de links, De um modo geral, os textos definidos 
‘come marcaderes de Binks são exibidos pelos Browsers sublinhades e com uma 
cor padrão, Já as imagens que têm esta função costumam receber uma berda 
padrão de lnk 


5.1 O marcador A 


y uma imagem como dy 
arte específica de um do 


As fags <A> e </A> podem marcar um texto 
perlink, assim como criar um endereço para uma 
cumento que será referida per um dink 

Cs principais parâmetros do comando А sic: 


HREF= “nome ou URL do arquivo” - Especifica o endereço da URL 
“a qual o link está associado. Pode ser usado para referências dentro € 
fora do documento, 


МАМЕ name" - Especifica o nome da seção de um documente que é 
referida por um link de hipertexto, Trataremos nas seções mais adiante, 


a 


TARGET= “janela - Especifica o nome do frame ou janela onde será 
aberto o nk. Quandc formes tratar de frames, este parâmetro será 
mais bem explorado: por ora, é útil saber apenas que a sintaxe TAR» 
GET, Hank faz com que uma nova janela seja aberta para carregar 
o documento, Casc o parámetro TARGET não seja utilizado, o docu- 
mento carregado será exibido na mesma janela onde está c lank, 


Nas euliseções seguintes serão vistas as sintaxes para criar links em todas 
as situações possiveis. 


5.1.1 Links para arquivos no mesmo diretório 


Semelhante ac que acontece com o comande IMG, para fazer uma ligação 
entre dois decumentos contitles no mesmo diretério, o programador necessita 
apenas especificar o nome complete de arquivo que será chamado no parâ- 
metro HREF do comando A, Este arquivo chamado poderá ser uma nova 
página, шпа figura, ou até mesmo uma seção específica de um documents, 
cemo será visto à frente, 

Sintaxe: <A HREF= “nome do arquivo”> Texte on imagem </A> 

Na sintaxe acima, o elemento envolvido pelas marcações <A> € </A> 
definido come marcador do link para se chegar ao decumenta cujo neme foi 
especificado no parámetro HREF, desde que este esteja no mesmo diretério 
do decumento certente, Se o пешіне clicar sobre o marcador, o documento 
especificado será exibido, 

Cem exemplis, podemes analisar as seguintes sintaxes: 


<A HREI dum" > Praias </A> = Faz com que a palavra ‘Praias’ 
копєзе o marcador de um ke para uma nova pina, denominada praias ml 
no mesmo diretório do documento comente, 


tomé-se c marcador de um link para uma imagem. dencminada praiajpe no 
mesma diretéric do documento corrente, 


<A HREI htm» <IMG SRO=pra 
que a imagem “praia, pe! tcrnesse c marcador i 
página, denerrinada praias. html no mesmo di 


аре? </A> - Faz com 
um link para uma nova 
téric do documento corrente 


UFF PE 
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Fara visualizar c funcicnamente de um tink, erie os documentes abaixo, 


Pecumento 1 
<HTML; 

<HEAD> 

ШИ Links 1 </ MILES 

</HEAD> 

<BCDY> 

<CENTER> 

<Н1> Eecumento 1 </Н!> 

<BR> 

Clique <A HREF—inks2.htenl”> aqui </A> 
</CENTER> 

</BODY> 

</HTML> 


para acessar o documento 2. 


Salvo com c nome de оке аг, 


Documenta 2: 


<HTML> 
<HEAD> 

<TITLE> Links 2 </TITLE> 
</HEAD> 
<BCDY> 
<CENTER> 
<Н1> Eccmento 
2. Notou o funcionamento do link? </P> 
</CENTER> 

</BODY> 

</HTML> 


A 


Salve-o com o nome de Чіпа? html? no mesmo diretório em que foi salvo 
© primeiro documente 


Abra o documento Ainksl.htmi e teste o link criado, 
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5.1.2 Links para arquivos em diretórios diferentes 


É pessível fazer ligações com documentos que estejam em оше diretéri 
Fara issc, basta especificar o caminho relativo, a partir do documento cot 
tente, para o documento desejado, no parâmetro HREF de comando A. O 
procedimento 6 análogo ao utilizado no ccmando IMG, visto no capitulo. 
anterior. 

Cemo exemplos, podemes analisar as seguintes sintaxes: 


<А HREF= Dir /praiasshtml"> Praias </A> - A palavra ‘Praias’ aponta 
para 5 decumento praias.html no dizetéric Cir] abaixo do diretóric 
comente. 


<A HREF= “praias hum" > Praias </A> - А palavra ‘Praias’ aponta 
para 5 decumento praias html no ditetório imediatamente acima do 
diretório comente. 


<A HREF=“. /Dirh/Dird/praias him» <IMG SRC= “praia pr? 
</A> - A imagem табари aponta para o documento praiashtml situada 

ic Dirt, abaixo do diretório Dir3, que por sua vez está abaixe de 
me se encontra dois diretórics acima do diretério corrente. 


no dictó 


perificação de endereço. onde o caminho para o documento 
desejado tem seu ponto de partida no diretério comente, é conhecido como 
tink relative, Podemos também especificar o endereço de um arquivo a pare 
divetério raiz. Este tipo de especificação é denominado ‘Fk absolut 
Sintaxe de um fink absoluto 

= "file /caminho a partir do diretório та 


i£ Texto ou ima- 


Por exemplo 
<A HREF= “БЕ: / /C:/Dirl /Dir2/Dir3/praiashtm"> Praias </A>. 


A sintaxe acima indica que a palava “Praias aponta para O arquiv 
бает? situado no diretério Dir, abaixo do diretório Гаю, abaixo d 
diretério Dirl do disco C do micro. 
Este tipo de endereçamento € c único possível quando se deseja acessar um 
arquivo centido numa umidade de disco diferente da do documento corrente, 
Experimente mover o decumento inks2.html" para o diretório acima do 
diretório atual e modificar o código do arquivo ‘links htm para: 
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<HTML> 
<HEAD> 

<TITLE> Links 1 </TITLE> 
</HEAD> 

<BODY> 

<CENTER> 

«Hl» Decumento 1 </Hl> 


ks2, html» aqui </A> para acessar с 


Verifique c funcionamente de tink, 

Experimente, agora, mover ‘links2.htmP para uma pasta 
contém o arquivo ‘linksl,html', Chame esta pasta de ‘Subd 
novamente ‘Tinks html conforme mestrado abaixo: 


aixo da que 
Medifigne 


<HIML: 


TF» Tinks 1 </TITI F> 
</HEAD> 
<BCDY> 
<CENTER> 
<HI> Documento 1 </Hl> 
<BR> 
Clique <A HREF=Subdir/links2.html”> aqui </A> para 
acessar с documento 2. 
</CENTER> 
</BODY> 
HTML> 


amentc dc link 


Verifique c fun 
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5.1.3 Links para arquivos em outro servidor 


Fora fazer ligações com documentos localizados em outro servidor é neces 
rio apenas especificar corretamente sua URL no parâmetro HREF do cc- 
mando A, Este recurso nos permite ter acesso a documentos que estejam em 
qualquer computador do planeta e que esteja conectado adequadamente à 


Testo ou imagem </A>, 


Observe о exemplo abaixe 


<A HREF= http://www servidor com br/ praias htm" > Praias < 


No exemplo, a palavra “Praias! é о marcador de um link para se chegar no 
arquivo габа him situado no servidor “wwwservidor.com br”. O protoccl 
utilizado é c http e sua declaração 6 necessária para a sintaxe correta da URL 
como vimos no primeiro capitulo. 

Digite o exemplo abaixe, e salve«c como ‘links hem. 


<HTML> 
<HEAD> 
<TITLE> Links 3 </TITLE> 


<CENTER> 
cHl Link para arepive em antro servidor </H1> 
BR> 

Clique <A HREF-—http: //wwwctelecom.ufflr, 
acessar a pívaacutezeina do PET-Tde па intemet, 
</CENTER> 

</BODY> 

</HTML> 


aqui </A> para 


Verifique c funcionamento de dink, 


5.1.4 Links para seções específicas em documentos 


Muitas vezes, quando se tem uma página muito extensa, о usuário pode 
enfrentar dificublades para lecaliza a informação que deseja, 
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Um procedimentc muito comm nesses cases é endereçar partes importane 
tes de texto de documento, cemo, per exemplo. títulos de seções. e criar um 
mem inicial no tepo da página com links que levarão c usuário diretamente 
à parte que Ihe interessa, evitando que ele tenha о trabalho de procurar, 


Criando âncoras: 


Para endereçar uma seção € utilizado o parâmetro NAME de comando A. O 
endereço criado recebe o neme de ancora, 

A sintaxe usada para criar uma âncoraé: <A NAM 
[Texte opcional] </A>. 


nanc da âncora” > 


Referenciando âncoras: 


Uma vez criadas as ânceras, pode-se criar Hinks para cada uma delas es 
ficando seu meme no parâmetro HREF do comando A. Se o programador 
tiver criado deems no início de сайл seção e texto. ele será capaz de criar o 
mem inicial de que falamos, de forma a permitir a0 usuário uma navegação 
mais inimica. 

Sintaxe: <A HI eme da áncora"> Texto ou imagem </A>. 

С símbelo S£? avisa o Browser para que este procure o link no documento 
E 

Utilizando-se os recursos de endereçamento descritos nas seções anter 
cies. c pregramador poderá referir, através de links seções específicas em 
documentos no diretório comente, em outros diretórios c até mesmo em ou- 
tros servidores 

Clserve cs exemplos: 


<A HREF= “Sechot"'> Seção 1 «ЈА: 
usuário à seção “Seção do documento atual, As marcações «A 
NAME='Seçãol” >< / А> devem estar presentes no documento atual; 
endereçando a seção desejada. 


O texto “Seção 1º levará o 


<A HREF= ‘Doct.html//Secio!"> Seção 1 </A> - O texte “Seção 1º 
varê o usuário à seção “Seção? do documento Decl him? kccalizado no 
mesmo diretório do documento atual, As mareações <A 
NAME=Seciol"></ A> devem estar presentes no documento ‘Doel html 
enderegando a seção desejada. 


иода Seção 1 </A> - C testo ‘Sagi Т 
à seção Seção do documento “Doc2 tm localizado no 
“Dir! abaixo do dictório atual, As marcações <A 

></A> devem estar presentes no documento Doct 
enderegando a seção desejada. 


<A HI ‘../Doc3.html#3eçîol"> Seção 1 </A> - O texto “Seção 17 
levará o usuário à seção “Seção!” do documento Poc3.htm!' localizado no 
iretériu itediatatnente айша do diretório atual, As marcações «A 

NAME=Seçãol"></A> devem estar presentes no decumento "DocAuhtmi 
endereçano а seção desejada. 

Digite o exemplo abaixo e salve-o como "inks html, 
<HIML> 
<HEAD> 
<TITLE> Links 4 - Seções Específicas em Documentos </TITLE> 
</HEAD> 
<RODY> 
<CENTER> 
<HI > Link para uma seção específica em um decumento </HI> 
<BR> 
Conheça <A 
HREP=Sitepsy www-teleocmanfl.br pet integrantes. html ех- bolsistas" > 
aqui </A> oc eseboleistas do FET-Tele. 
</CENTER> 
</BODY> 
</HTML> 

Visualize o código fonte da página exibida pole dink de exemplo acima 
para ver as âncoras que cla possui, Tente modificar c exemplo “ink htm 
para que o link leve o usuário а outra seção da mesma página, 


5.2 Enviando e-mail diretamente da página HTML 


E possível acionar o programa padrão de e-mail diretamente de uma página 
HTML usando uma variação do comando A, que usa a opção MAILTO no 
lugar da URL, 

taxe: <A HREF: 


JAI TO:enderege de e-mail > Texto cu imagem 
</A> 
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521 Preenchendo o campo Assunto ou Subject 


É possível preencher automaticamente o campo "Assunto acrescentando а 
variável “SUBJECT” segnitla do texto que se deseja exibir. 
Sintaxe: <A HREF=MAILTO:endereço de emailSUBJECT=texto do 
assunto” > Tecto ou imagem </A> 
Note que c texto do assunto não pi 


ecisa estar entre aspas. 


542. Enviando mensagem para mais de um destinatário 


a enviar mensagens para mais de um destinatár 
endereços de e-mail por vírgulas, 

Sintaxe: <A HREF=MAILTO:endereçoL.endereço?, endererc3 SUBJECT =texto 
do assumto"> Texto cu imagem </A> 


basta separar sens 


5.2.3 Enviando uma cópia da mensagem 
Para preencher o campo CC. basta adicionar “&ece= e o endereço do desti- 
mario. 

Sintaxe: <A НАЕ 
assumtoee-endareg 


URIFCT-texto do 


<HTML> 

<HEAD> 

TITLE: Links 5 Enviando E-mail </TITLE> 

</HEAD> 

<BODY> 

<CENTER> 

«HI Enviando emails diretamente <BR> da pkaacute:gina «Hi» 
<BR> 

Envie um <A HREF= mailto:pet_teleGyaho« 
do eso de HTML&ee=digit 

PET-Tele, 
</CENTER> 
</BODY> 
</HTML> 
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Capítulo 6 


Listas 


Uma forma muito conveniente de estruturar um documento HTML é a uti- 
liacic de litas. As listas podem funcicnar como um sumário, um mem ou 
am resumo do conteúdo do documento e são excelentes рага serem usadas 
como ponto de partida ao acesso de outras partes de documento, 

Existem basicamente três tipos de listas: as não ordenadas, que contém 
uma série de itens sem numerá-los, as ordenadas, que atribuem um número 
para cada elemento da lista c as listas de definições, que contém termes € 
suas respectivas definições, Os comandos usados para criar carla um destes 
tipos de s nas próximas seções, 


6.1 O marcador UL 


As marcações <UL> e </UL> são utilizadas para gerar listas não crdenadas 
(Unendrrei lists). Estas fogs devem envolver todo a ronjimo de itens da 
lista, e cada item deve ser precedido da marcação «LI» (Line tem). 

C principal parámetro do comando UL é o parâmetro ТҮРЕ. que permite 
me sejam especificadas variações para o marcador utilizado na lista. 
Jores possíveis de se atribuir ao parámetro ТҮРЕ si 


TYPI 


square = define um quadrado prete cemo marcador. 


o circular como marcador. 


o preto camo marcador, 


sc - define um. 
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Sintaxe básica: <UL> [hens da lista] </UL>. 
Sintaxe completa: <UL ТҮР > [tens da 
O exemplo abaixo ыта a reno de nma lista 

с salvando como “listas html. 


<HIML> 
<HEAD> 

<TITLE> Listas 1 - Lista Nívatiklez Ordenada </TITLE> 
</HEAD> 

<BODY> 

<UL TYPE-DISC> 

<LI> Primeiro item 

<LI> Segundo item 

<11> Terceiro item 


6.2 O marcador OL 


As marcações ntilizadas para gerar listas отлета дая (Ordered its) são «CI» 
Estas fags devem envolver todo c conjunto de itens da lista, e 
саја item deve ser precedido da marcação <LI>, 

Os principais parâmetros do comando OL são: 


START=númerc” - permite escolher o primcirc número da lista, Se este 
rámetro não for especificado. a numeração começará do início. 


TYPE= “po” - permite escolher c ti 
veis valores são: 


de marcador da lista. Seus posse 


TYPE=1 - Cria uma lista numé 
ficado, pois é padrão. 


ca normal. Não precisa ser especie 

TYPE=A - Cria uma lista alfabética com letras maiúsculas comcs 
«ando pelo A, 

TYPE=a - Cria uma lista alfabética com letras minúsculas came 
ando pelo a, 
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TYPE-I - Cria uma lista numérica com números romance (maiisco 
os) começando pelo 1, 

TYPE-i - Cria шпа lista numérica ccm números remancs (miniscu- 
Tes) começand: 


É importante resaltar qr. independente do tipo de marcador utilizado. 
iremos sempre um número ao parámetro START. Se, por exemple, a 
programador escrever START—3 para uma lista alfabética com letras maiús- 
cas, © primeiro marcader da lista será a letra C, pois € a terceira letra do 
alfabeto. О mesmo acontece com listas alfabéticas com letras minúsculas € 
listas cujos marcadores sã algatsmos romance 
Sintaxe básica: <OL> [Itens da lista. </01 
Sintaxe completa: «OL ТҮРЕ лара? START 
</OL 
C exemplo abaixo ilustra a construção de uma Tista ordenada. Digite 
salvando como html’, 
<HIML> 
<HEAD> 
<TITLE> List 
</HEAD> 
<BODY> 
<ol> 


“múmerc”> [Itens da lista 


Lista Crdenada</TTTLE> 


<LI> Primeiro item 
<LI> Segundo item 
<LI> Terceiro item 
</OL> 


6.3 О marcador DL 


Umali 


a de definições consiste em alternar um termo e uma definição. 
tags <DL> e </DL> utilizadas para gerar listas de defini 
Estes comandos devem envolver todo o conjunto de termos e definições da 
Jista, Os termes devem ser precedidos da marcação <DT> e as definições 
da marcação <DD>. 

Digite 2 exemplo 


abaixo e salveso como "інах иш, 
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<HIML> 
<HEAD> 

<TITLF> Vistas 3 - Lista de Definikeccedilicotikdees < /ТТТ1Е> 
</HEAD: 

<BODY> 

«HL» Lista de Lefini&eceedil;kotikle;es<H1> 

<DL> 

<ET> Primeiro termo 

<DD> Pefinileccedil:Kcatillezo do primeiro termo 

<ET> Segundo termo 

<DD> Pefinilecoedikkcatillezo de segundo termo 

<ET> Terceiro termo 

«DD» Cefinifecoedik&atildeo do terceiro termo 

<DD> Pefmifecoedik&atildeo alternativa para o terceiro termo 
</DL> 

</BODY> 

</HTML> 


Os clientes Wet costumam exibir uma definição na linha de baixo e des 
locada à direita, ccm relacác a seu termo correspondente. 


6.4 Aninhamento de listas 


ar diversas litas, ou seja, colocar uma lista dentro da outra 
Para tanto. па hera de escrever о có 


do mesclar todes os tipos de listas. 
O exemplo abaixo ilustra um aninhamento de listas de tipos diferentes, 
Digitec salvando cemo “listas rn 


<HIML> 
<HEAD> 
<TITLE> Listas 4 - Aninhamento de Listas </TITLE> 
</НЕАП> 
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<LI> Primeiro termo da lista ordenada 
<LI> Scenndc terme da lista ordenada, 
ES 
<LI> Primero item da lista n&atildeo ordenada contida no segundo item 
da lista ordenada 
<DL> 
<DT> Primeiro termo da ista de деоба сой дезе contida no 
primeiro item da lista n&atildeo ordenada 
<DD> Definicccedilicatilde;o do primeiro termo da lista de 
definiecedilcotldezs contida no primeiro item da lista n&atilde;o 
айтай 
<DT> Segundo termo da lista de definiccelibictikeses contida 
primeiro йет da Tista n&atildeo ordenada 

Кайе; de segundo terme da lista de 
dees contida no primeiro item da lista natildeo 


ordenada 
E 


> Segundo item da lista пеар ordenada contida no segundo item 
da lista ordenada 

<LI> Terceiro item da lista n&atilde;o crdenoda centida no segundo item 
da lista ordenada 

</UL> 

<LI> Terceiro item da lista ordenada 

<LI> Quarto item da lista ordenada 

</OL> 

</BODY> 

</HTML> 


6.5 Listas com marcadores gráficos 


Este não é um tipo podio de lista da linguagem HTML. mas € um recurso 
Lastante usado na confecção de páginas da Web. 

C que desejamos agora é usar imagens como marcadores para os itens da 
lista, e para isso teremos que usar a marcação <IMG SRC>. 

Fscolha, primeiramente, uma imagem de scu agrado є salve come “mar 
caddor gif. Esta imagem será o marcador de nossa lista. 

Digite, agcra. o exemplo seguite, Salve=o come “sta 


iml. 
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a com Marcadores Crimenes 


<BODY> 

<IMG SRC= ‘macadorgif"> Primeiro item <BR> 
<IMG SRC= ‘marcador.gif"> Segundo item <BR> 
<IMG SRC- "marcadot.gif 2 Terceiro item 
</BODY> 

</HTML> 


Note que, apesar de não possuir nenhum dos comandos padrão de lista 
estudados, a formatação do texto na tela será a de uma lista cujes marcadores 
são imagens, 

Quando se deseja aninhar listas com marcadores gráficos, toma-se neces 
sírio utilizar as tags <DL> e <DD> para que as subelistas sejam deslocadas 
à direita devidamente, 

O exemplo abaixo ilustra este procedimento. Digite- salvando como 
гаво 


<TITLE> Listas û - Lista com Marcadores Gricaacutesicos Aninhados 
</TITLE> 


<IMG SRC= "marcador gif" Primeiro item <BR> 
<IMG SRC= ‘marcador.gif"> Segundo item 
<DL> 


<DD> <IMG SRC='mareadoreif” WIDTH=20" HEIGHT= 20> 
Primeiro subitem de segundo item 
<CD><IMG 


SRC—marcadoneif” WIDTH=20" HEIGHT=20"> 
m do segundo item 


<DD> <IMG SRC=mareador.gif” WIDTH=#10" HEIGHT="10"> 
Primeiro sub-item do segundo subitem 
<ED><IMG SRO- marcadorgif? WIDTH="10" HEIGHT=A0"> 
Sendo subeitem do segundo subitem 
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<DD><IMG SRC="mareador.gif” WIDTH=! 
Terceira snh-item do sendo item 


" HEIGHT 


<IMG SRC= “marcador. gif” > Terceiro item <BR> 
RC- “marcador. gif" > Quarto item 


Note 
IMG foram utilizados para modificar cs tamanhos dos marcadores de acond 
com a hierarquia da lista, Os tamanhos utilizades nc exemplo pedem não 


ne, no exemplo, es parametros WIDTH e HEIGHT do comando 


ficar bons dependende da imagem escolhida. portanto, sinta-se livre para 
meddifeá-dos, É aconselhável usar sempre imagens enje tamanho seja próximo 
ac do testo. 


Capítulo 7 


Tabelas 


O usc de tabelas melhora muito a aparência de uma página pcis permite o 
alinhamento de textes c imagens, além de erdenar as informações de uma 
forma padronizada, 
Uma tabela é constituída de linhas e colias, e a interseção entre estes 
elementos é denominada cédula, 
tabelas são criadas pelo comando TAI 
comando TR e as células de uma 


E 


suas linhas são criadas pelo 
nha são criadas pelos comandes TD ou 
|. Todes esses comandos serão detalhados nas seções segnintes, 

Para ter uma noção do funcionamento, digite o exemplo abaixo, Salve-o 
como “tals htm. 


<HTML: 
<HEAD: 
<TITLE> Tabels 1 </TITLE> 
</HEAD> 
<BODY> 


TD> Виа! colina! </TD> 
D> linhal coluna? </T 


</TR> 


D> linha? cchinal </T 
<TD> linha? coluna? </T 


linha? cclunad </TD> 
TR> 

</TABLE> 

</BODY> 

</HTML> 


7.1 O marcador TABLE 


As marcações <TABLE> e </TABLE> são usadas para 
Os principais parâmetros do comando TABLE são: 


tabelas, 


BORDER = +пбтего? - Especifica a largura da linha das bordas que sepa- 
тап as células da tabela. Se não for especificado este parámetro, não 
será exibia uma horda para а tabela 


CELLSPACING —námero" - Especifica o espaçamento. em pixels, entre 
as células. 


CELLPADDING-—nümerg" - Especifica o espaçamento, em pixels, entre 
o conteúdo e a banda da célula, 


WIDTH—número | número% - Especifica a lura da tabela em pie 
xel ou em porcentagem relativa à largura da janela. 


ALIGN=“teft | center | right” - Define © alinhamento da tabela na pie 
ima 


BGCOLO! 


BORDERCOLOR-«or" - define a cor de borda da tabela, Só func 
‘ona se algum valor diferente de zera tiver sido atribuido ao parâmetro 
BORDER. 


“cor” - Especifica a cor de fundo de toda a tabela. 


BACKGROUND= “nome ou URL do arquivo” - Define uma imagem 
como plano de fundo para toda a tabela. 


Sintaxe bás 
ABLE>, 
Sintaxe completa: <TABLE BORDER= “númerc 
CELLSPACING=úmero” CELLPADDING= número" 


ж: <TABLE> [Comandos de criação de linhas e células] 
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WIDTH= número | ima? ALIG 
ха” 
BORDERCOLOR- cer» [Comandos decr 


(tipo de alinhamento” BGCOLOR= 


iode linhas e células 


LE: 


7.2 O marcador TR 


A tag <TR> (Table Rew) define uma linha da tabela. Fara cada linha deve 
ser escrito um par de marcações, <TR> e </TR>, c entre das devem ser 
especificados cs comandos TD ou TH para criar as células de dades daquela 
Jinha. As linhas de uma tabela não precisam ter necessariamente c mesmo 
número de células. 

Cs principais parâmetros do comendo TR sio: 


ALIGN= “left | right | center | justify" - Especifica o alinhamento ho- 
rizontal do conteúdo das células 


VALIGN=“top | middle | bottom | baseline” - Es 
vertical do conteúdo das células. 


ecifica c alinhamento 


BGCOLOR= “cor? - Especifica a cor de fundo para а linha, 
BORDERCOLOR=*or* - Define a ccr de borda das células da linha, 


BACKGROUND=nome cu URL do arquivo” - Define uma imagem 
mo 
plam de fumo para a linha. 


Sintaxe básica: <TR> [Comandes de criação de celtas </TR>- 
Sintaxe completa: <TR ALIGN- ıo de alinhamento” VALIGN— tipo 
de alinhamento” BGCOLOR= car" BCRDERCOLOR=cor"> [Comances 
de criacio de célula </TR>. 

Cs parâmetros do comando TR se sobrepõem acs 
nome de comando TABLE 


àmetrcs de mesmo 


7.3 O marcador TD 


A tag <TD> (Table Data) define o conteúdo de uma célula da linha de uma 
tabela, Esse conteúdo deve ser escrito entre as marcações <TD> e </TD>, 
Frincipais parâmetros do comando TD: 


ALIGN: 
ü 


VALIGN=top | middle | bottom | baseline" - Es 
vertical do conteúdo da célula, 


ifica o alinhamento 


NOWRAP - Evita a quebra de linha dc conteúdo da célula, 


COLSPAN=“número” - Este parâmetro permite aumentar a largura de 
uma célula fazendo com que ela ocupe colunas adjacentes. Nele deve 
ser especificado o número de colinas que a célula irá ocupar 


ROWSPAN=“múmero” - Este parâmetro permite aumentar a altura de 
‘uma cédula fazendo com que ela осире linhas adjacentes, Nele deve ser 
especificado o número de linhas que a célula irá ocupar. 


WIDTH=“número | número?" - Especifica a larzura da célula em pixels 
‘ou em porcentagem relativa à largura da tabela. 


BGCOLOR=“cor* - Especifica a cor de fundo da саша, 
BORDERCOLOR=*or” - Define a ccr de borda da célula, 


BACKGROUND=*nome cu URL do arquivo” - Define uma imagem 
come 
plano de funde para a célula. 


Sintaxe básica: <TD> Caracteres </TD>, 
Sintaxe completa: <TD ALIGN— tipo de alinhamento” VALICIN= 
NOWRAF COLSPAN="número' ROWSPAN= número" 
WIETH= número | número?” BGCOLOR= ter" BOREERCCLOR- cor» 
Caracteres </TD>, 

Os parâmetros de comando TD se sobrepõem ac 
nome dos comandos TR e TAB 


arámetres de mesmo 


7.4 Títulos de colunas 


Através de 
dor pode es 


y de marcações <TH> e </TH> (Title Heading) o programa- 
icar títulos para as colunas, Estas tags funcionem da mesma 
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Torma que € </TD>, ső que deixam, por padi, o centeúdo da сё 
ula centralizado e em negrito, Cs principais parâmetros sic cs mesmos do 
comando Т 

Cs parâmetros do comando TH se sobrepõem aos parâmetros de mesmo 
nome dos comandos TR e TABLE. 


7.5 Expansão de células em linhas e colunas 


Uma vez definida a estrutura básica de uma tabela, ou seja, c número de 
Tinhas e chmas, podemos “apagar а divisão entre células vizinhas de maneira 
a ammenrar a largura on a алга de nma сёй, criando assim, tabelas mais 
em definidas, 

0 AN do ccmando TE permite aumentar о tamanho 
ЧЕ uma célula fazendo com que cla ccupe colunas adjacentes, enquanto que 
o parâmetro RCWSPAN faz com que a célula aumente ocupando linhas ade 


exemplo abaixe estas expanses, Digite-o e salve como чаз лит 
<HIML> 
<HEAD> 
TITLE>Tabelas 2 « Expansctildeses </TITLE> 
</HEAD> 


<TH COLSPAN-: 
</TR> 

<TR> 

<TH> Subt&eiacutestulo 1 </TH> 
«TH Subtéciacntestulo 2 </TH> 
<TH> Subt&iacute:tulo 3 </TH> 
<TH> Suhtqciaentectnlo 4 </TH> 


Tiacutestulo 2 </TH> 
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<TH> Thecacntepieo 1 </TH> 
<TD> Dades </TD> 

<TD> Dades </TD> 

<TD CCLSPAN-2 ROWSPAN-2 ALIGN=center VALIGN= 
Dades n&atilde:o dispon&iacntesveis </TD> 

</TR> 

<TR> 

<TH> Tecacmtepico 2 </TH> 

<TD> Dades </TD> 

<TD> Dades </TD> 

</TR> 

</TABLE> 

</BODY> 

</HTML> 


7.6 Aninhamento de tabelas 


Analogamente no que acontece cem as listas, € possível definir uma tabela 
dentro de оша, Para tanto, basta especificar entre marcações <TD> e 
</TD> a definição de uma outra tabela. Isto cermesponde à inserção de 
uma tabela dentro de uma célula de outra tabela. 


О exempl abaixo ilustra este procedimento. Digite- e salve como “tals htm 


<HIML> 
<HEAD> 

<TITLE> Tabelas 3 - Aninhamento 
</HEAD> 

<BODY> 

<TABLE BORDER=1 BCRDERCOLOR- “black” WIDTH=100%> 
<TR> 

<TD> 

<TABLE BORDE 
<TR> 

<TD> Ckeacute;lula 1 </TD> 
<TD> Сап} 2 </TR> 
<TD> C&eacutedula 3 </TR> 
</TR> 


/TITLE> 


=1 BCRDERCOLOR=ree?” WIDTH=100%> 
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<TR> 
<TD> Ckeacuteiula 4 </TD> 
<TD> Ckeacutesula 5 </TD> 
<TD> C&eacutesula 6 </T 
</TR> 

</TABLE> 

</TD> 

<TD> Ckeacutelula </TD> 
</TR> 

<TR> 

<TD> Ckeacutedulas </TD> 
<TD> Ckencutelulad </TD> 
</TR> 

</TABLE> 

</BODY> 

</HTML> 


7.7 Legendas 


Se o programador desejar criar um título ca legenda para а tabela, b 

© comando CAFTICN imediatamente após a abertura do comando TA 
Sintaxe básica: «CAPTION ALIGN- top | bottom» Legenda </CAFTION>. 
C. principal parámetro do romando CAPTION € a parâmetro ALIGN. Se 

atribuirmcs ac parámetro ALIGN o valor ‘tcp’, a legenda especificada será 

exibida na parte superior da tabela, Por outre lado, se a ele for atribuído 

o valor ‘Lcttem’. c Browser exibirá a legenda especificada abaixo da tabela, 

Em ambes ce casos a legenda é centralizada de acordo ccm a tabela, 
Modifique o exemplo tales, tim cenforme indicado abaixo. para inserir 

uma legenda na parte superior da tabela. 


<HIML> 

<HEAD> 

<TITLE> Tabelas 3 - Aninhamento </TITLE> 
</HEAD> 
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-CAPTION ALIGN= top> Legenda na parte de cima da tabela 
</CAPTION> 

<TR> 

<TD> 

<TABLE BORCER=1 BERDERCOLOR- red" WIDTH=100%> 
<TR> 

<TD> Ckeacutedula 1 </TR> 


<TD> Ckeacute;lula 2 </TD> 
<TD> C&eacutedla 3 </TD> 
</TR> 
<TR> 


<TD> Ckencute;lula 4 </ TD: 
<TD> Ckeacute;lula 5 < TE: 
TD» Cieacute;lila 6 ТТ 
</TR> 

</TABLE> 

</TD> 

<TD> Селанка? </TD> 
</TR> 

<TR> 

<TD> Ckeacute lulas </TD> 
<TD> Сеад </TD> 
TR> 

TABLES 

BODY» 

HTML: 


АЛАЛ 


Experimente agora celocar a legenda na parte inferior da tabela, 


Capítulo 8 


Formulários 


Cs formulários eletrônicos sác um dos mais fascinantes recursos da linguagem 
HTML pois através deles um usuáric pode interagir cem c sevidor enviando» 
lhe dados para serem processados. Cs comandes de criação de formulários 
portanto, 5 p is responsáneis pela troca de informações entre 
diente е servidor. 

Neste capitulo, você aprenderá a criar um formulirio usando cs rertrses 
da linguagem HTML. Porém, para que um formulário funcione, é neces- 
sário que no lado do servidor exista um outro programa, escrito em outra 
Tinguagem de programação. que será c respensivel pelo recelimento e pro» 
cessamento das informações enviadas, Este tipo de programa é dencminado 
CGI e não será abordado neste curso 


8.1 O marcador FORM 


As marcações <FORM> e </FORM> são usadas para definir um formulárin, 
Este ccmando tem duas funções importantes: especificar o local do programa 
rclará o formmalário e definir a forma cu método 


C cemando FORM pessui as seguintes parâmetros: 


ACTION=“URL* - Especifica c lecal (URL) do servidor e do pregrarna 
CGI que vai processar cs dados do formulário. 


“Método de troca de dados” - Indica c métode usak: 
lads do formulário, As eis para 


METHOI 
servidor para receber o 


a 


este parámetro sic 


GET - As informações são em te da URL. 


POST - As informações são enviadas mam bloco de dados separado 
da URL, É o método mais utilizado, 


ntaxe: <FORM ACTICN=URI? 
formulário </FORM> 

Nos exemplos das seções scgnintesjemoraremos os parâmetros 
FORM, uma vez que não estaremos realizando envio de infamaci 


formulários apresentados, 


das como se fizessem pe 


METHOI 


8.2 O marcador INPUT 


С marcador INFUT define um campo de entrada de dados, onde c usuá 

digita as informações requeridas pelo formulário. Cada campo de um formu- 

Лайс atribui seu conteúdo a uma variável que possui neme e tipo específicos 
Os parâmetros de marcador INFUT são os seguintes: 


о de variável" - Espe 
pções possíveis são 


ica o tipo de dado para а variável 


Suas c 


TEXT - Aceita dadas do tipo caractere. É о tipo de variável mais 
usado para a digitar de texto cem tamanho 
nhecido. Por palrîo, a caixa de digitação criada para este tipo de 
variável terá аша equivalente a 20 caracteres, não impõe limite 
para a quantidade de caracteres digitados 

PASSWORD - Acrita dados do tipo caractere, Funciona exatamente 
como uma variável do tipc TEXT, porém, exibe um asterisco no 
lugar de cada caractere digitado para impedir sua visualizaçã 
tela, É ideal para a digitação de senhas e palavras-chave, 

RADIO - Aceita campos do tipo sim não. Fermite a exibição de 
várias opções, mas só aceita que uma delas seja escolhida. O 
campo de entrada de dados criado para este tipo de variável é 
am pequeno círculo, que pede ser marcado ccm um clique. Dois 

culos associa las à mesma variável não podem estar marcados 

imultaneamente, peis quando o usuário clicar sebre o segundo, o 

primeiro será automaticamete desmarcado. 
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CHECKBOX - Aceita campes de tipo 
rias opções є aceita que 
de entrada de dades criado pa 
pequeno quadrado. que pode ser marcado com um clique, 
SUBMIT - Cria um botão que envia c conteúdo do formulário ao 
ser pressionado. Cs dados são enviados para а URL especificada 
no parâmetro ACTION e de acordo com a método escelhido no 
parâmetro METHOD de cemando FORM, Por a legenda 
do botão criado será Submit 
RESET - Cria um ctio que, ac ser pressionado, possibilita ao ust 
apagar e restabelecer o valor padrão para todos cs campos do 
formulário de uma única vez. For padrão, a legenda do botão 
criado será ‘Reset’, 
HIDDEN - Define um campo invisível, cujo conteúdo é enviado junto 
com сє demais. 


adi 


NAME- nome" - Nome da variável que receberá o conteúdo do campo. 
Este parámtero é essencial na sintaxe de criação de qualquer campo de 
entrada de dados, seja qual far o tipo de variável escol 


VALUE =valor - Permite definir um conteúdo prévio para campos des 
tipos TEXT e PASSWORD, cu seja, um texto que aparecerá escrito 
na caixa de digitação quando o formulárió for aberto, Fara cs campos 
do tipo CHECKBOX ап RADIO representa о valor que será atribuído 
A variável se a opção for marcada. Fara os campos SUBMIT e RESET 
indica o texto que aparece no Letão, Este parâmetro 6 obrigatório 
apenas para variáveis dos tipos CHECKBCX e RADIC. 


CHECKED - Só se aplica a campos do tipo CHECKECX e RADIC 
campos cuja sintaxe de criação possui este parámetro aparecerão mat- 
cados quando o formulário for aberto, 


“tamano” - Define a quantidade de caracteres exibidos em campos 
do tipo TEXT оп PASSWORD, Este número delimita apenas c tama- 
nho do campo para digitação, c não a quantidade de caracteres que o 
campo pode ter. 


MAXLENGTH="comprimento” - Define o número máximo de caracte- 
ves permitidos para variáveis do tipo TEXT cu PASSWORD, 


02 


ID—String de identificação” - Identifica o campo para permitir que seja. 
criada uma tecla de atalho para ele, 


Sintaxe básica para campos do tipo TEXT: 
<INFUT TYPE- tex NAME: 
Sintaxe completa: <INPUT TYPE text" NAME- nme SIZE— tamanho" 
MAXLENGTH—vomprimente" VALUE alor" 

Sintaxe básica para campos do tipo PASSWORD: 
<INFUT TYPE passwor NAME nome". 
intaxe completa: <INPUT TYFE— password" NAME- nome” 
[ZE=tamanhe"MAXLENGTH=temprimento” VALUE alor". 

Sintaxe básica para campes do tipo RADIC: 
<INFUT TYPE radic" NAME nome" VALUI 
Sintaxe completa: <INPUT TYPE="tadic NAM 
CHECKED: 

Sintaxe básica para campos do tipo CHECKBOX: 

INFUT TYPE=‘checkbox” NAME— nome" VALUE "valor s 
intaxe completa: <INPUT TYPE гаће" NAME- nome" VALUE= valcr" 
CHECKED». 

Digite o exemplo abaixo е salve-o como “forms. ти, 


<HIML> 
<HEAD> 

<TITLE> Fomul&aacntesrios 1 </TITLE> 
</HEAD> 

<BODY> 

<CENTER> 
<Hl>Ficha de Inscrico 
</CENTER> 
<FORM> 

Nome: <INFUT ТҮРЕ: 
Роба 

<INFUT TYPE-radio NAM 
<INFUT ТҮРЕ-тайо NAME=sexc VALUI 
<F> Assinale abaixo os programas de computador que veeKecite: dor 
<BR> <INFUT TYPE =checkbox NAME=prog VALUE =word> Ward 
<ER><INFUT TYPE checkbox NAME-prog VALUE-excel> Excel 
<BR><INFUT TYPE =dheckbos NAME-prog VALUE=arcess> Access 


та 
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<BR> <INPUT TYPE=checkbox NAME=prog VALUE=powerpcint> 
Power Раш 

<P ALIGN=cemer> <INPUT TYPE=submit VALUE 
TYPE-reset VALUE="Apagar Сату P> 
</FORM> 

</BODY> 

</HTML> 


Enviar> <INFUT 


8.3 Os marcadores SELECT e OPTION 


As tags <SELECT> e </SELECT> definem e exibem uma lista de itens que 

podem ser selecionades pelo usuário. Visualmente elas criam uma lista de 

seleção onde uma caixa é exibida com э valor padráo, e o clique em uma seta 

faz surgir uma lista de opções, Um cu mais itens podem ser selecionados. 
Cs parâmetros do comando SELECT são: 


NAME=nome* - Especifica o nome da variável que receberá o centeúdo 
de campo. 


SIZF=“tamanho” - Especifica a quantidade de itens que será exibia de 


uma vez pela lista. Este parâmetro é cpcicnal. 


MULTIPLE - Indica que podem ser escolhidos vários itens da lista. É 
opcional 


Sintaxe básica: «SELECT NAME mme" 
ntaxe completa: «SELECT NAME="neme” SI 
MULTIPLE [Itens da lista </SELECT>. 

Cada item da lista deve ser especificado pelo comando CFTICN, cujes 
principais parâmetros sao 


VALUE=conteúdo” - Define 9 conteúdo que a variável correspondente 
receberá caso a opção seja selecionada. 


SELECTED - Indica que a 
Tecionada. 


is da lista] </SELEC 
“tamanho” 


deve ser previamente marcada como se- 


5 ELECTED». 
Complemente see “forme html conforme o indicado abaixo, 


a 


<HIML> 
<HEAD> 
<TITLE> Formiláranentesrios 1 </TITLE> 
</HEAD> 

<BODY> 

<CENTER> 

<H1>Ficha de Tnseri&ecedik&atilde;o</H1> 
</CENTER> 

<FORM> 

Nome: <INFUT TYPE-text NAME=nome> 
<F>Sexc: 

<INFUT TYPE=rad 


NAME-sexc VALUE=m>Masculino 
<INFUT TYPE=radio NAME=sexc VALUE=f>Feminino 

<F> Assinale abaixc os programas de computador que veckecire; domina: 
'YPE=checkbox NAME=prog VALUE=word> Weed 

E TYPE checkbox NAME prog VALUE- excel» Excel 
<BR><INFUT TYPE=checkbox NAME-proz VALUE=access> Access 
<BR><INFUT TYPE=checkbox NAME=prog VALUE=powerpoimt> 
Fower Fcint 

<E> Cargo:</F> 

«SELECT NAME=cargo> 

«OPTION VALUE-analista- Analista de Sistemas 

<OPTION VALUE=gerente>Gerente 

<OPTION VALUE-programador-- Programador C 

<OPTION VALUE= Webmaster: Webmaster 

</SELECT> 

<F ALIGN=center> <INPUT TYFE=submit VALUE=Enviar> <INPUT 
TYPE=teset VALUE="Apagar Campos" </P> 

</FORM> 

</BODY> 

</HTML> 


8.4 O marcador TEXTAREA 


As marcações <TEXTAREA> e </TEXTAREA> definem uma caixa de 
digitação ende c usuário pode digitar livremente um texto, Esta caixa pode 
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ser previamente preenchida com algum texto que deve ser especificado no 
local de texto padrao”, 
Cs parâmetros do comando TEXTAREA sic: 


NAME=nome’ - Especifica o nome da variável que receberá a centeúdo 
de capo. 


ROWS-nümero* - Especifica a altura, cu seja, a quantidade de linhas 
que a caixa deve ter, 


(COLS="nimero? - Especifica а largura, cu seja, а quantidade de colunas 
‘que a caixa deve ter. 


Assim sua sintaxe £: <TEXTAREA ХАМЕ neme" ROWS=námero” 
COLS=númene"> Texto Fadrão «TEX TAREA». 
Complemente mais uma vez c exemplo “forms | html" conforme o indicado, 


<HIML> 
<HEAD> 
<TITLE> Formulkaacul 
</HEAD> 

<BODY> 

<CENTER> 
<HI>Ficha de Incrikccediktatildeo-HL» 
</CENTER> 

<FORM> 

Neme: <INPUT TYPE=text NAME=nome> 
«Роко 
<INFUT TYPE 
<INFUT TYPI 


jos 1 </TITLE> 


radio NAME-sexc VALUE-m» Mascul 
io NAME=sexo VALUE=f> Feminino 


<BR> <INPUT TYPE. 
<BR><INFUT ТҮР! 
<BR><INFUT TYPI 
<BR><INPUT TYPE 
Power Feim 
«SELECT NAME=cargc> 

<OPTION VALUE=analista> Analista de Sistemas 
«OPTION VALUE=gerente>Gerente 


6 


<OFTICN VALUE=progamador>Frogramaler С 
<OFTICN VALUE=Webmaster>Welmaster 

</SELECT> 

<P> Por que deseja trabalhar em nossa empresa? 
<BR><TEXTAREA ROWS=6 COLS=40 
'NAME=pq>M£iacutemimo de 3 linhas! </TEXTAREA> 

<F ALIGN=center> <INPUT TYFE=submit VALUE=Enviar> <INFUT 
TYPF-reset VALUE > </P> 

</FORM> 

</EODY 
E 


8.5 Alinhamento de campos em formulários 


851 Usando o marcador PRE 


problemas que o programador pede enfrentar na criação de formulá- 
rios éo fato de os campes do formulário não ficarem alinhados naturalmente 

Uma técnica simples de alinhamento consiste em envolver cs comandos 
relatives acs campos de formulário pelas marcações <FRE> e </FRE>, 

O texta formatado pelo comando FRE € exibido em uma fonte de largura 
fixa, cu seja, todas as letras possuem a mesma largura. Desta forma, basta 
acrescentar os espaços necessários entre о rétulo do campo e o comando 
INFUT para que seja feito c alinhamento. 


8.5.2 Usando tabelas 


Uma técnica mais versátil consiste na utilização de tabelas para alinhar cs 
campos, Nesta técnica a tabela deve possuir colas de títulos e colunas 
de campos, Fara ter uma noção mais clara desta técnica, digite c exemplo 
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<P> Alinhamento usando tabela 
<FORM> 

<TABLE> 

<TR> 

<TD>Nome:< TE> 

<TD><INFUT TYFE-text NAME=nome></TD> 
<TD>E-mail:</TD> 

<TD><INFUT TYPE 
</TR> 

<TR> 
<ID>Tekfone:</ 
<ID><INFUT ТҮР! 
<TD>Celular:</ID> 


<TN><INPUT ТҮРІ 


text NAME=email></TD> 


text NAMF=rel></TN> 


<P> <INPUT TYFE=submit VALUE= 
VALUE="Apagar Campcs?» 
</FORM> 

</BODY> 

</HTML> 


86 Agrupamento de campos com o marcador 
FIELDSET 


© marcador FIELESET é milizado para envolver campos com uma moldura, 
Basta que es campos sejam criados entre as marcações <FIELDSET> € 
</FIELESET>. Sua sintaxe básica é: <FIELDSET> [Campos </FIELESET>, 
Além disso, c comando LEGEND, definido dentro do comando FIFLD- 
SET, permite especificar nomes para os conjuntos de campos e criar teclas 
de atalho para cles, Sua sintaxe básica é: <LEGEND> Nome do conjunto 
de campos </LEGEND>. 
Estes recursos não são compatíveis com todes os Browsers 
Digite о exemplo abaixo e salveso como ‘farmsdhtml', 


<HIML> 
<HEAD> 


в 


<TITLE> Fonmiláranentezrios 3 - FIELDSET </TITLE> 
</HEAD: 
<BODY> 

<FORM> 

<FIELESET> 

<LEGEND> Informafrocedilzázotildezes de Contate</LEGEND> 
Nome:<INFUT TYPE=text NAME=ncme><BR> 

E-mail: <INPUT TYPE-text NAME-email><BR> 
"Tdefone:<INPUT TYPE=text NAME=tel> 

</FIELESET> 

<FIELESET> 

«LEGEND Санкак de cr&eacute;dito</LEGEND> 
<INFUT TYPE=radio NAME-card VALUE=visa> Visa 
<INFUT TYPE-rad VALUE=me> Master Card 
<BR> 

Nfuacuteymero: <INPUT TYPE=text NAME=number> 
<BR> 

Data de validade: <INPUT TYFE=toxt SIZE=7 NAME=data 
VALUE mm aad 

</FIELESET> 

</FORM> 

</PORV> 

</HTML> 


8.6.1 Teclas de atalho para conjuntos de campos 


C parámetro ACCESSKEY de emareador LEGEND permite ac programador 
definir teclas que. quando pressionadas ¿untamente com a tecla ALT. movem 
cursor para a o campo de сайа conjunto. 

Sintaxe: «LEGEND. ACCESSKEY=A> Neme do cenjunto de campos 
</LEGEND> 

A sintaxe acima define a tecla a? como teda de atalho para o conjunto 
de campos Name de cenjunto de rampes’, 

Modifique o exemplo formsa.html para que fique como mostrado abaixo, 
Teste as teclas de atalho. 


<HIML> 
<HEAD> 
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<TITLE> Formulkancuterics 3 - FIELDSET </TITLE> 
</HEAD> 

<BCDY> 

<FORM> 

<FIE 
«LEGEND ACCESSKEY-I> 
<U>1</U>nfarma&ccedil:&otilde;es de Contato</LEGEND> 
Neme:<INFUT TYPE=text NAME=nome><BR> 

Exmail:<INPUT TYFE=text NAME=email> <BR> 

Tdefcne:<INPUT TYPE=text NAM 
</FIELESI 
<FIELDSET> 

«LEGEND ACCESSKEY=C> <U>C</U>art&atilde;o de 
cr&eacute;dito< /LEGEND 

<INPUT TYPE=radio NAME=card VALUE=visa> Visa 

<INPUT TYPE-radio NAME=card VALUE=mc> Master Card 
<BR> 

N&uacutemero: <INFUT TYPE=text NAME=number 
<BR> 

Cata de validade: <INPUT TYFE=text SIZE=7 NAME=data 
VALUE=0/000 
</FIELDSET> 
</FORM> 
</BODY> 
</HTML> 


6,2. Teclas de atalho para campos 


Outre marcador que р 
de um formulário através de tec 
especifica nma tecla que. ac ser pressinnad; 
meve o cursor diretamente para с camp 

Fara utilizar c marcador LABEL car cada campo atra- 
vés de parámeuro ID do marcador INPUT. A sintaxe usada é <INPUT 
TYPE=tipo” NAME—nome" ID=String de identificação” >, 

Uma vez identificado c campo, a tecla de atalho para ele será definida 
através do parâmetro ACCESSKEY do marcador LABEL. O parâmetro FOR 
deste mesmo marcador indicará o campo a que a tecla de atalho levará. A 


usuário navegar rapidamente pelos campos 
las de atalho é o marcador LABEL. Esta taz 
ntamente com a tecla ALT, 


a 


sintaxe usada é: <1 
ACCESSKEY=A FOR= ‘String de identificação” > Rótulo do campo </LABEL> 
©. Г marcadcr LABEL pode também ser fechado lego após sua abere 
tura ou até mesmo depcis da tag de criação do campo 

Modifique nevamente a exemplo forms html” para que fique como mes 
trado abaixc, Teste agora as teclas de atalho para cada campo. 


<HIML> 
<HEAD> 

<TITLE> Fammliaacuter 
</HEAD> 
<BODY> 
<FORM> 
FIELESET 
LEGEND ACCESSKEY=I> <U>1</U>nformakccedil;totikde;es de 
Contato</LEGEND> 

LABEL ACCESSKEY=N FOR=nome> <U>N</U>emet 
/LABEL><INPUT TYPE=text NAME=nome 
ID=nnme><BR> 

«LABEL ACCESSKEY=E FOR=email><U>E</U>-mail: 
</LABEL><INPUT TYPE=text NAME=email 
1D-email><BR> 

«LABEL ACCESSKEY=T FOR=tel> < 
</LABEL><INPUT TYPE=text NAMI 
</FIELDSET> 

FIE 
LEGEND ACCESSKEY-C» <U>C</U>artiatilleso de 
aakeacntexdito< /LEGEND> 

<LABEL ACCESSKEY-V FOR=visa> <INPUT TYPI 
NAME=card VALUE-visa ID=visa> <U>V</U>isa 


3- FIELDS 


TITLE 


T</U>ELEFONE: 
el ID=tel> 


R> 
<LABEL ACCESSKEY=U FOR=num> 
N<U>&uacute;</U>mero: </LABEL><INPUT TYPE=text 
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<BR> 
<LABEL ACCESSKEY=D FOR=data> <U>D</U>ata de 
validade: </LARFT.> <INPUT ТҮРЕ: 

NAME=data VALUE=00/0000" Ц 
FIELESET> 


AAA 


Capítulo 9 


Frames 


O recurso de frames permite ac programader criar páginas HTML que podem 
ser visualizadas simultaneamente na ¿anela do Browser, Desta forma, a janela 


fica dividida em frames que compartilham c espaço disponível. Este recurso 
não é compatível cem todos os dientes Wel, porém é aceito pelas versões 
mais recentes des navegadores mais populares. 


C neo de frames requer um planejamento prévio. que consiste na criação 
da estrutura de janelas. O prceramador irá especificar a quantidade de fia- 
mes, a disposição que eles terão na tela, a largura e a altura de cada frame, 
assim como o conteúdo que será exibido em cada um deles. 


9.1 О frame document 


O uso de frames exige a criação de um documento HTML especial que con 
têm todas as definições dos frames. Este documento se diferencia dos demais 
per não utilizar о comando BODY, Em seu lugar 6 usado o comando FRA- 
MESET. Dentro do par de marcações <FRAMESET></FRAMESET> são 
especificados todos cs atributos dos frames que senão criados, tais como sua 
quantidade e dispesição horizontal e vert 

Сайа frame especificado precisará de um catre comando para definir suas 
características individuais e, principalmente, sen conteúdo, Fara tante € 
utilizado o comando FRAMI 


т 
9.2 О marcador FRAMESET 
or FRAMFSFT si 


Cs principais parámetros de marca 


COLS="tamanhos” - É usado para criar um documento com frames dise 
tos em columae, Nele deverá ser especificada a Tanna de cada 
colima do documento, Os valores podem ser especificados em pixels 
percentagem cn tamanho relativo, 


ROWS="tamanhos” - É usado para criar um documento com frames dis 
postos em linhas, Nele deverá ser especificada a altura de cada linha do 
documento. Os valere: percentagem 
ou tamanho relative 


FRAMEBORDER-1 0 - Mestra ou inibe berda para os frames, caso re 
Ceba os valores 1 cu O respectivamente 


FRAMESPACING="valor” - Cria espaço adicional em pixels entre ce 
frames, 


Sintaxe básica: <FRAMESET COLS | RCWS="tamanhos"> [Especifi- 
cação inividnal de cada frame] </FRAMFSFT> 

Sintaxe completa: <FRAMESET COLS | ROWS="tamanhos” 
FRAMERORDER=1/0_ FRAMESPACING="valor"> [Especificação indivi 
dual de сайа frame’</FRAMESET>. 


9.3 Especificação de tamanho de frames 


9.3.1 Usando valores em pixels 


ecifiar о tamanho de frames no comando FRAME- 

SET através de ROWS e COLS, A maneira mais simples de 

fazê-lo é atribuir valeres em pixels à dimensão com que se está trabalhando. 

altura по caso do parámetro ROWS e largura no cas Ametra COLS, 
As dimensões dos frames devem estar separadas entre si por vírenlas, 
Veja cs exemplos 


FRAMESET COLS="100.200.200"> [Frames] </FRAMESET> - Cria 
três frames dispostos em colunas, cujas larguras, da esquerda para a direita, 
são de 100. 300 e 200 pixels, 
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<ERAMESET ROWS="60.100,100,200'> [Frames] </FRAMESET> = 
Cria quatro frames disposto em linhas, cujas alturas, de cima para baixo, 
são de ff, 100, 1m e 200 pixels. 


Nota: Quando a dimensão especificada para nm determinado Бае não 
é suficiente para еміз seu couteûdo, barras de rclagem aparecem automati- 
camente para auxiliar o usuário, 


9.3.2 Usando valores relativos 


Para dividir frames igualmente pela dimensão da ¿anela de Browser, a melhor 
opg é usar о sinal de asterisco para cada linha ou cohma, 
Veja cs exemplos: 


<ERAMESET COLS—"*,%""> [Frames] </FRAMES 
frames dispostos em colunas cujas larguras São ia. 


<ERAMESET ROWS-"t,t,t,t ös [Frames] «FRAMES 
frames dispostos em linhas cujas alturas são igna. 


T> - Cria cinco 


<FRAMESET COLS="*,2*"> [Frames </FRAMESET> - Cria dois 
frames dispostos em colas, sendo que a da direita ccupa deis terges da 
tela. 


<FRAMESET ROWS-"* 300,5" [Frames] </FRAMESET> - Cria um 
frame com altura de 300 pixels no centro da janela e, acima є abaixe: dele 
fames de mesma altura. 


9.3.3 Usando valores percentuais 
A terceira forma de especificar tamanhes de frames é utilizando valores na 
forma percentual. tetalizande 100%. 

Veja cs exemple 


<FRAMESET ROWS='30%, 70%"> [Frames] </FRAMESET> - Cria 
dois frames dispestes em linhas, send 30% da tela, e 
ıo de baixo ocupa 70% 


76 


<FRAMESET COLS="30%, 50%, 209775 [Fames] </FRAMESET> - 
Cria tres frames dispostos em colunas, sende que o da esquerda ocupa 30% 
da tela, o do centro N% e o da direita 2%, 


«FRAMESET ROWS~"25%, *, 107» [Frames] </FRAMESET> - Cria 
tnés frames dispostos em Hnhas, sendo que п de cirm сапра 25% da tra, c 
de baixo tem altura de 100 pixels e o do centro ocupa o espaço restante, 


Nota: Como você deve ter percebido pelos exemplos, os diferentes forma- 
tos de valores podem ser combinados entre si. 


9.4 О marcador FRAME 


Enquanto o comando FRAMESET cri 
FRAME € c responsável pela atribuição do conteúdo de cada frame e das 
características individuais de cada um deks, Os parámetros do comando 
FRAME se sobrepõem acs parâmetros de mesmo neme do comando FRA- 
MESET. 

Principais parámettos do comando FRAME: 


c layont geral des frames, c comando 


SRC= “Endereço” - Este parâmetro é a único indispensável. pois especi- 
fica o nome cu a URL do documento que será exibido no frame. 


ALIGN—"posicao” - Ajusta o alinhamento do frame cu do texto. As op- 
ções permitidas para este parâmetro são: 


Top - O texto ao redor de frame é 
frame. 
Middle - O texto ао redor do frame é alinhado pelo meio do frame. 


Bottom - O texte ао reder do frame é alinhado pela parte infericr do 
frame. 


inhado pela parte superior do 


Left - O frame é alinhado à esquerda, deixando с texto posi 
no seu lado direito. 

Right - O frame é alinhado à direita, deixando c texto pesicionado no 
sen lalo esquerdo 


ado 


ШЕЕ PE 


ELE)) TT 


FRAMEBORDER=10 -Idéntico ao parin 
mando FRAMESEL, ele ativa ou desati 
frame atual. 


MARGINHEIGHT="altura” - Especifica a altura das marzens superior 
e infericr do frame em pixels. 


MARGINWIDTH="argura” - Especifica а largura das margens esquerda 
e direita do frame em pixels. 


tra de mesmo neme do cœ 
a exibição de borda para o 


NAME="nome* - Atvilui um nome para о frame, de maneira que possa 
ser idemificado e сеза para ramegar docimentos. 


NORESIZE - Evita que o frame seja redimensionado pelo usuário, 


SCROLLING=yes| no - Quando ajustado 
que o frame possua barras de rolagem. 


ra o valor ‘no’, nào permite 


Sintaxe básica: «FRAME SRCname ou URL do атоо? >, 
F SRC="nome эп URL do arquivo” 

Кай” FRAMEBCRDER- 110 MARGINHEIGHT="altura" 

MARGINWIDTH="langura” NAME="nome" NCRESIZE SCROLLING=yes 

| no». 


9.5 Combinando ROWS e COLS 


Pode-se combinar a criação de frames usando os deis atributos, O programa- 
dor pode, por exemplo, criar uma janela dividida em dois frames horizentais, 
onde o de baixo é dividido em duas columas, Para que isto seja possível 
‘tasta aninhar conjuntos de comandos FRAMESET 

Fara exemplificar, vamos criar, primeiramente, os documentes que ser 
exibidos por cada frame 

Documento 1: 


<HIML> 
<HEAD> <TITLE> Documento 1 </TITLE></HEAD> 
<BCDY> 

<CENTER><H1> Documento 1 </H1></CENTER> 


DY> 


IML> 
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Salve com э nome de “осип, 


Documento 2: 


<HIML> 

<HEAD> «TITLE» Documento 2 </TITLE></HEAD> 
<BODY> 

<CENTER><H1> Documento 2 </HI></CENTER> 
</BODY> 

</HTML> 


Заһе-о com э nome de осон, 
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Documento 3: 


<HIML> 
<HEAD> TITLE» Documento 3 </TITLE></HEAD> 
<BODY> 

<CENTER> «HI» Documento 3 </HI></CENTER> 
</BODY> 

</HTML> 


Salvo com c nome de оса 
Agora, digite o segninte código, salvandc-o como ‘frames html’: 


<HIML> 
<HEAD> 

<TITLE> Frames 1 </TITLE> 
</HEAD> 

<FRAMESET ROWS="10% 60%"> 
<FRAME SRC='docl hti 
<FRAMESET COLS 
<FRAME SRC— dcc hti 
«FRAME SRC-docdrhtm > 
</FRAMESET> 

</FRAMESET> 

</HTML> 


Abra o arquivo “frames! htm e visualize o resultado, 


9.6 Interligação de frames 


Uma aplicação interessante do recurso de frames é a criação de páginas 
exiham, na mesma tela, nma lista de itens permanente e a conterido do item 
selecicnado, Fara fazer isto precisaremos de dois frames, um para 
Tista c ошто, се conteúdos, 

Ce frames devem receber nomes, através do parâmetro NAME 
mande FRAME, para que o Browser pessa abrir cs documentos no local 
correto, 

No campo do eabeçalhe de documento que contém cs ода, deve ser usada 
a tag <BASE TARGET nome do frame", contendo о nome do frame 


E 


que abrirá os conteúdos des itens. Podese também utilizar o parâmetro 
TARGET do comando A para este fim. A sintaxe utilizada neste caso seria: 
<A BREF="nome ou URL de documento” TARGET nome da janek > 
Texto do link </A>, 

Para facitar, utilizaremos em nosse exemplo as páginas ‘dee! html’, doctum 
edee3. htm criadas para o exemplo anterior, Entretanto. precisaremos айат 


© decamente que funcionará como menu, 
Digite o código a seguir е salvesc como “meu html? 

<HIML> 

<HEAD> 


<TITLE> Menu </TITLE> 
<BASE TARGET "frame > 


</HEAD> 

<BODY> 

«H2» Lista de tens: </H2> 

<OL> 

<LI> <A HREF-'ücchhtml"» Linkl </A> 


<LI> <А HREF—"dec2.himal”> Link? </A> 
<LI> <A HREF="doc3;html"> Link3 </A> 
</OL> 

</BODY> 

</HTML> 


Agora, vamos criar a estrutura dos frames 


<HIML> 

<HEAD> 

<TITLE> Frames 2 </TITLE> 
</HEAD> 

«FRAMESET COLS="20%. 70%"> 


met” > 
«FRAME NAME: ості. 
</FRAMESET> 


</HTML> 


Salve com c nome de frames? html, 
Abra c arquivo “rames2 htm € teste os links do frame da esquerda, 
Aprecie a efeito na tela, 
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9.7 O marcador NOFRAMES 


Como foi dite no inicio do ca в recurso de frames não é compativel 
com todos os browsers, Portanto, se algum usuário acessar uma página que 
tenha frames com um Browser que não os reconheça, пайа será exibidc 

Fara solucionar este problema existe c comando NOFRAMES, que p 
mite a inclusão de avisos cn comandos HTML que serão visnalizades pelo 
шонат não cempativel com frames, 

As marcagirs <NOFRAMES> е </NCFRAMES> cão definidas dentro 
da estrutura do campo de atuação do comando FRAMESET. Entre elas 
podem ser especificados quaisquer comandos HTML. que só serão executados 
se 0 frameset não puder ser carregado pelo Browser. 

Considerando a hipótese de lidar com Browsers que não reconheçam fia- 
mes, sugere-se as seguintes alternativas ao criar sua página: 
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1, Use o comando NOFRAMES e emita um aviso de que c Browser usado 
não aceita frames e aproveite para sugerir endereços para que o usuário 
sa ‘baixar versões mais ncvas. 


2. Crie uma página inicial que permita ao usuário escolher entre visualizar 
uma versão com frames e аша sem frames, 


3. Use c ccmando NCFRAMES para carmegar autcmaticamente uma vere 
são sem frames do scu site. 


C exemplo abaixe é uma modificação do arquivo "frames2.htmb. utili- 
zando о ccmandc NOFRAMES, Mdifiquesc também em seu computador € 
salve com o neme de ‘frames. html 


<HIML> 
<HEAD> 

TITLE> Frames 2 </TITLE> 
</HEAD> 

<FRAMESET COLS—"30%, 70%" 
<FRAME NAME frame!" SRC 
<FRAME NAME="frame2" SRC 
<NOFRAMES> 

Esta pleaacute:gina usa frames, um recurso nécatilde;o suportado 
pelo Browser que est&aacute; sendo utilizado. 


пешш 
item hui 


BR> 
Sugerimos cbter uma vers&atildeso atualizada do <A 
HREF="http://homenetscape.com" TARGET="_blank"> 
Netscape Navigator </A> ou do <A 

HREF="hitp: //wwwamicrosoftcom” TARGET: 
Internet Explorer</A: 
</NOFRAMES> 
</FRAMESET> 
</HTML> 


'_blank”> 


9.8 Janelas especiais para frames 


Fara dominar completamente о uso de frames, é importante conhecer a fi 
nalidade de quatro nomes especiais de janelas que são predefinidos, Usando 
estes nomes no parâmetro TARGET do comanda A, 9 Browser irá carregar 
© documente em determinadas sanchs, 


TARGET-" blank" - Ry com que uma nova janela seja aberta para 
carrear б documento. 


Faz com que o documento seja aberto na mesma 


parent” - Faz com que o documento seja camegado no 
л во do documento atual. 


“top” - Faz cam que o documento seja canregado usando a 
janela inicira do Browser, ocultando. assim, a exibição dos frames do 
‘documento, 


Capítulo 10 


Imagens Mapcadas 


Mapas de imagem (ou image maps) são figuras colocadas na página que, ao 
serem clicadas em regiões específicas, permitem o acesso а outros documen- 
tes, É como se determinadas partes da imagem funcionassem como Binks, 

As imagens mapearlae podem ser eriadas através de programas espec 
denominados mapenderes de imagem, tais como Mayedit e Map This Os 
arquivos gerados por este tipe de programa possuem a extensão "map, mas 
alguns possuem a opção de criar diretamente um arquivo HTML que cone 
tém apenas а área de definição do mapa. Nesta apostila, entretanto, não 
estaremos abcrdando a criação de mapas através de prceramas mapeadores, 

Existem dis tipos de mapas de imagem, O primeiro é o server-side (lado 
do servidor) e, o segundo, o elientsside (lado do cliente). 


10.1 Mapas do tipo server-side 


Neste tipo de mapa de imagem, c arquivo „тар fica lecalizado no servidor, 

Quando o nsnáric clica na imagem, o Browser envia uma solicitação ac 
servidor perguntando o endereço (URL) do documento associado à área cli- 
сайа. C servidor envia, então, o endereço de velta ao Browser que Ihe retcrna 
uma selicitação para abrir aquele decumento, 

Não entraremos em detalhes sobre © funcionamento de mapas do tipo 
serversside, peis seu mecanismo não envelve diretamente programação HTML 
Basta saber que, para inserir um mapa deste tipo num documento, é neces. 
sário criar uma âncora da imagem para o programa que interpreta mapas 
no servidor com a identificação do mapa asscciado a esta imagem. A sin 


н 


tase utilizada para isso 6: <A HREF=URL do pregrama /ientificacio do 
arquivomap ><IMG SRC="nome da imagen” ISMAP></A>. C parâme 
tro ISMAP do cemando IMG indica que a imagem é db tipo clicável, ou seja. 
uma imagem mapeada, 


ide 


A definição deste tipo de mapa é feita inteiramente no documento HTML 
que c contém, Esta defini e ser feita totalmente a mão ou utilizando 
recursos de programas mapeadores, Nesta apostila trataremcs apenas da 
definição A mão através de comandos da lingnagem НТМЇ. 


10.2 Mapas do tipo client-s 


10.2.1 O marcador MAP 


Cada imagem inserida como mapa precisa ter comandos de m; 
cindos a ela, Tais comandos ecrrespondem à definição do mapa propi 
di 


amento aso- 
mente 


“Todos os comandos de uma imagem mapcada cemo client-side devem ser 
амак pelas marcações «MAP» e </MAF>» 

O principal parâmetro do comando MAP é NAME=home", Ele 
а definição de um mapa, um nome único que será referido pelo parâmetro 
USEMAP de comando IMG utilizado para colecar a imagem na 

Sintaxe básica: «MAP. NAME- nome do mapa» [Defin 
sensíveis </MAP> 

Para chamar um mapa de imagem clientside através do comando IMG 
é usada а Sintaxe: <IMG SRC— nome da imagem” USEMAP= nome do 
пара Note que п sáb # deve anteerdrr a neme do mapa, 


ão de Areas 


10.2.2 O marcador AREA 


A marcação <AREA> C utilizada para especificar as áreas sensíveis, o 
que podem ser clicadas, de um mapa de imagem, 
Seus principais parâmetros são: 


u seja: 


SHAPE-— forma" - Determina o formato da área sensível, Este formato 
será usado para a especificação das coordenadas e pede receber cs sce 
guintes valores 
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RECT (retângulo) - Exige quatro ccordenxdas, xl, yl, x2 e y2. As 
coordenadas x1 e у1 cerrespondem ao vértice superior esquerdo do 
Tetángulo, enquanto que x2 e y2 cerrespondem ac vértice inferior 
direito, 

CIRC (circulo) - Exige três coonlenadas xC, yC e r, As coordenadas 
XC e yO correspondem ao centro do circu e a coordenada т ao 
seu raio, 


POLY (polígono) - Exige um par de coordenadas para cada vértice 
do ic descrito, No caso, ХМ e yN cerresponderiam à locali 
zação do vértice N do р 

DEFAULT - Não exiec cocrdenada nenhuma. Pode ser usada para 
definir uma URL que será carregada se o usuárie clicar sobre uma 
área da imagem que não foi mapeada, 


COORDS=*ecordenadas” - As coordenadas dependem diretamente do 
valor do parâmetro SHAPE, conforme explicitado acima, e sens valores 
são medidos em pixels, Num mapa retangular de área NxM, sendo N 
sua largura e M sua altura em pixels, a coordenada (х=, y=0) core 
responde ao seu vértice superior esquerdo, enquanto que (xN, у=М} 
пет ac seu vértice inferior direitc. 


HREF=“nome ou URL do arquivo” - 


specifica o caminhe para c dos 


cumentc a que determinada região da imagem levará, se clicada, 


janela” - Especifica o nome da janela onde o documento deve 


ser carregado, Pode receber cs seguintes valores: 


“blank - Abre o documento em uma nova janela 
ela de nivel imediatamente supe- 


_ self - Abre c documento na própria janela do link. 


_top = Abre o documento na janela de nível mais alto e ocupando 
oda a área, 


ALT= texto” - E: 
da área, 


ibe o texto especificado quando o cursor passa por cima 


% 


Para exemplificar a criação de um mapa de imagem, considere a imagem 
baixo, que possui um тобат, um círculo e um iriüngnlo, Vamos fazer 
cem que cada шпа dessas figuras, ao ser clicada, leve a um documento HTML, 
Salve esta imagem como “mapas. 


Digite as documentos abaixo: 
Documento 1: 

<HIML> 

<HFAN><TITTF> Mecnmente | </TITI F></HFAN> 

<BODY> 

<CENTER=<HI> Vockeecire: clicou sobre c ret {ac 

</HI></CENTER> 

</BODY> 

</HTML> 


Salveo cem o neme de *docre dimi. 


“ngulet 


Documento 2: 


<HIML> 
<HEAD> «TITLE» Documento 2.</TITLE></HEAD> 
<BODY> 

<CENTER><H1> Vocieecire; clicou sobre o edeiscutesrento! 
</Hi></CENTER> 

</BODY> 

</HTML> 
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Salvero com c nome de “досе за. 
Documento 3: 


<HIML> 
<HEAD> «TITLE» Documento 3 </TITLE></HEAD> 
<BCDY> 

<CENTER> <H1> Vockecire; dicon sobre o tricaciremento! 
</HI></CENTER> 

</BOD 
</HTML> 


Salve-o com c nome de doc-trihtmb, 
Documento 4: 


<HTML> 
<HEAD><TITLE> Mapa de imagem </TITLE> </HEAD> 


lique sobre as figuras abaixo: </HI> 
<IMG SRC—mapa.gif" USEMAP=#mapa> 
</CENTER> 

<МАР NAME=mapa> 

<AREA SHAPE=tect COCRDS: 


<AREA SHAPE=poly COORDS='87, 107,154, 66,134, 
HREF=tbe-trihimF > 

</MAP> 

</BODY> 

</HTML> 


Salve-o como mapa.hemt. 
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Apéndic 
Notações especiais para símbolos 


Netações especiais para símbolos: 


Noms Denge 
I Tar que > 
El; | Menor que < 
kamp; | E comercial & 
Капо: | Aspas duplas Е 
ree; | Marca registrada | ® 
copy: | Copyrights © 


otações para letras acentuadas , onde x é qualquer letra maiúscula cu 
minúscula: 


made T Natação Exemplo 

Acento agulo | аше Toacute= 6 

Acento grave | шале Ашам À 
Acento circunflexo | exci (eine; E 


Letra cam til | Хехе; | &atilde:=ā / &Ntille;= 
Letra com trema | &xumb | &uumb- ü / &iumk = i 
Cedilha xcci ÈCredil:-Ç 
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Notações para símbolos estrange 


Caracter Notação 
Tetras com aracla | Karina = a e Ап = А 


Letras unidas | Kaclig; — æ e CAEN: — E 
C cortado | Која, = c e &Celash: = 2 
Eth mE 


Caracter alemão Хей; = B 


Apéndice B 
Padroes de cores 


Lista de cores ccm seus respectivos padrőes rob 


White: rgb = #FFFFFF 
Red: ngo = #FF0000 
Green: agb = #00FF00 


Flue: reb = #0000FF 
Magenta: rab — #FF00FF 
Cyan: rab 

Yellow: тї. 

Black: rab = + 


Aquamarine: rek: = #700003. 
Baker's Chocolate: rab 


0) 
Brown: rgb — #A02A24 
Bronze: 12b 
Bronze Il: rgb 
Cadet Blue: reb 
Cool Copper: reb = #008719 
Copper: tgh = ¿2187333 

Coral: gb = #FF7F00 

Com Flower Blue: rob = #404065 
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Dark Brown: rb = #5C4033 
Dark Green: reb = #2F4F2F 


Dark Purple: ral: = 
Dark Slate Blue rgb 
Dark Slate Grev: reb = FIFA 
Dark Tan: rgb — #97004F 

Dark Turquoise: nb = #70098 
Dark Wood: rgb — #855E4 

Dim Grev: tab 
Dusty Rese: ml 
Felkpar rg 


Gold: 18b = #CDTF32 
Goldemed: reb = #DBEB70 
Grey: reb = #09C0C0 

Groen Ccpper: rgb = #527876 
Green Yellow: rgb = #020870 
Hunter Green: rgb — ¿21521 
Indian Red: reb = #AE2F2F 
Khaki: rgb = #9F9F5F 

Tight Blue: reb = s CüDono. 
Light Grey: rgb = #ARASAS 
Light Steel Blue: rgb = #SFSFBD 
Light Wood: 1gb = 

Time Green: rgb 
Mandarian Orange: teb — 
Marcem: rgh 

Medium Aquamarine: rgb 
Medium Blue: г} 
Medium Forest Green: rgb 
Medium Geldenrad: reb = 
Medium Orchid: el 
Medium Sea Green: rgb 
Medium Slate Blue: ral 


